angular/material2

Material Design components for Angular

Amin Bashanfar

@Amin-bash

guys, how can I share a SCSS file

I have class that I used it 2-times in my app

BertrandMarechal

@BertrandMarechal

Hey

depending on the case, you have 2 options

Amin Bashanfar

@Amin-bash

what I want is to create a file and put the class in it and then use it where is want

BertrandMarechal

@BertrandMarechal

or put it in the global style.css file, and name it uniquely enough to have it there

or refer to this stylesheet in your components styleUrls's array

Amin Bashanfar

@Amin-bash

how ?

I know that there is way something like this

BertrandMarechal

@BertrandMarechal

@Component({
    selector: "component",
    templateUrl: "component.html",
    styleUrls: ["component.css", "shared-file.css"],
})

the issue with this option is that you'll have to keep track of which components are using this file

Amin Bashanfar

@Amin-bash

@BertrandMarechal I'm trying this way but I couldn't find the path of the file :))

BertrandMarechal

@BertrandMarechal

which file ?

Amin Bashanfar

@Amin-bash

SCSS

BertrandMarechal

@BertrandMarechal

ah ok

but you found it now right ?

Amin Bashanfar

@Amin-bash

yeah I did it and works thank you bro :)))) @BertrandMarechal

BertrandMarechal

@BertrandMarechal

great :thumbsup:

Aliaksei Kuncevič

@kuncevic

Hey guys, do you think creating a custom angular material module per app that holds all the angular material bits in the app considered as a bad practice?
It is probably affecting the final size of a components/modules right?

Bojan Kogoj

@BojanKogoj

Not an expert, but I don't see how it should be bad. We use most material imports in a shared module. Unless it is used once, then it's imported in that module directly. No idea what the best practice is though

BertrandMarechal

@BertrandMarechal

I think best practice is having a material module per module, and just importing the relevant module sat that point

reason is that the module will then contain only the relevant bits

this might change with a proper tree shaking

BertrandMarechal

@BertrandMarechal

so you would have like user.module.ts, importing a material/user-material.module.ts importing and exporting the Material modules ( the so that the user-material.module is inside a material folder for ng g commands do not get confused)

Bojan Kogoj

@BojanKogoj

I'm not sure about how exactly tree shaking works, but wouldn't you end up with more data if you have the same 10 imports in material/user-material.module.ts and material/project-material.module.ts?

BertrandMarechal

@BertrandMarechal

same thing, not an expert

I remember from what I heard that having one big shared module will be packaged in the main file, as used everywhere, whereas smaller modules will just be packaged when used

seems to be confirmed in this link for instance :

https://itnext.io/how-to-optimize-angular-applications-99bfab0f0b7c #3

Jorrit

@jorrit-wehelp

and extra module would increase the size a bit... also not sure I see an advantage of having an extra user-material module, and not just importing in user.module.ts :/

BertrandMarechal

@BertrandMarechal

that's fair on this one, it's a preference I have, as MaterialModules imports can be verbose for an extensive module, and your module can look like a monster

it's kinda, if it gets over 3, I create this sub material module

Jorrit

@jorrit-wehelp

yeah, but you can still manage that a bit by const variable with array of the modules

really doesn't have to be an ngModule

BertrandMarechal

@BertrandMarechal

yup, does not need to

Amin Bashanfar

@Amin-bash

guys what is the best way to get the value of the selected icon

can anyone help me with this :))

Amin Bashanfar

@Amin-bash

where are the guys

Derek

@derekkite

https://material.angular.io/components/radio/overview#radio-groups @power-amin

Amin Bashanfar

@Amin-bash

@derekkite I know how to get it like
[value]="allMails"
[value]="dailyMAils"
and create a 4 variables

but I'm looking for a better way to do it

I don't think it's a good practice to create 4variables for this

and at the same time I can't create an array because each one of them has to have a different text

Eric

@sliceofbytes

Just create an array of strings

AndreEllrich

@andreElrico

I have post this in the angular/angular as well. As this is related to cdkPortal I also post it here:

How can I change the ViewContainer my ng-template/cdkPortal is "attached" to ? https://stackoverflow.com/questions/60117068/how-can-i-change-the-viewcontainerref-of-a-ng-template

Ronnie Barker

@ronniebarker

Anyone got any ideas on my dragging whilst scroling issue? I’d like to tell the framework what element should be tracked as the scroller

I am also having a problem with cdk drag and scrolling - but a different one. I have draggavle lists inside a scroillable sidenav container, but the scroll position is't being added to the drag item so it's out by the scroll position. Is there any way to tell cdg drag what the parent sroll container is?

Where communities thrive

People

Repo info

Activity