1

Is there any way to use parent attached CSS file use in child page

enter image description here

In my PageLayout I have:

@Component({
    styleUrls: [
        "../assets/css/bootstrap.min.css",
        "../assets/css/font-awesome.min.css",
        "../assets/css/theme.min.css"],
    templateUrl: "_layout.html"
})

In _layout.html

<router-outlet>
</router-outlet>

After calling child URL, child page is rendering but parent CSS is not applying. After checking in dev mode in chrome, I have found that for parent page

ul[_ngcontent-yny-1], li[_ngcontent-yny-1], span[_ngcontent-yny-1], div[_ngcontent-yny-1], button[_ngcontent-yny-1], input[_ngcontent-yny-1], select[_ngcontent-yny-1], span[_ngcontent-yny-1], label[_ngcontent-yny-1]

for child page

ul[_ngcontent-yny-2]

as highlighted in screenshot attached

Route Config for app and layoutpage are below

export const appRoutes: Routes = [
    {
        path: "", component: PageLayoutComponent
    },
    {
        path: "", component: PageLayoutComponent, children: PageRoutes
    }
]

export const PageRoutes: Routes = [
    {
        path: "", component: LandingComponent
    },
    {
        path: "landing", component: LandingComponent
    }
]
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Nik Varma
  • 158
  • 9
  • 1
    If you want to use those styles for your whole application, you should consider inserting them into the styles array in the angular-cli.json file instead of the components stylesUrl, another option would be setting the encapsulation to ViewEncapsulation.None. – Emerson Jair Aug 05 '17 at 19:23
  • Check this post, maybe that helps you : https://stackoverflow.com/a/36528769/1791913 – FAISAL Aug 05 '17 at 19:25
  • Thanks @Emerson, But i have three diff Layout and for every layout i have diff StyleUrls. Also tried ViewEncapsulation.None the same in child TS file but it not working – Nik Varma Aug 05 '17 at 19:25
  • are you looking for something like [this](https://rahulrsingh09.github.io/AngularConcepts/host) . the components here have a prent child relation ship which i feel is what you want – Rahul Singh Aug 05 '17 at 19:28
  • Nope @Rahul, I am not trying to modify. I have set of three of diff CSS files for three diff layouts and i want to use those file layout specific – Nik Varma Aug 05 '17 at 19:31
  • you want to place that layouts on parent and use it all the way down to the child is this your requirement ? – Rahul Singh Aug 05 '17 at 19:32
  • Yes, but is not on main app page. I have one app main page inside that i have three diff layout page. Every layout page have set of CSS files Layout 1 styleUrls: [ "../assets/css/bootstrap.min.css", "../assets/css/font-awesome.min.css", "../assets/css/theme.min.css"], templateUrl: "_layout.html" Layout 2 styleUrls: [ "../assets/css/bootstrap_2.min.css", "../assets/css/font-awesome_2.min.css", "../assets/css/theme_2.min.css"], templateUrl: "_layout_2.html" etc – Nik Varma Aug 05 '17 at 19:34
  • then i guess you might have to go for sass or using host inject all these properties into the child components as it was shown in the linjk – Rahul Singh Aug 05 '17 at 19:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151160/discussion-between-nik-varma-and-rahul-singh). – Nik Varma Aug 05 '17 at 19:37

1 Answers1

0

so, you want being able to use global css styles. in this case, remove angular view encapsulation, adding next line in the components involved :

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})
sancelot
  • 1,905
  • 12
  • 31