angular/material2

Material Design components for Angular

Vaisakh Rajagopal

@var23rav

The problem is i cant use tooltip class since the position should be relative to a table column, whose width is dynamic .

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