CODEWITHSUNDEEP
angularangular5
Niladri Banerjee - Uttarpara
Niladri Banerjee - Uttarpara

Reputation: 2329

Angular 5 css not found in nested component

I have created one nested component (named - demotask) in admin-dashboard component. I have also created the required .ts and .html files for this. The nested component is appearing at the correct position but the css is not working for this nested component. All the styles/css are attached to the project through angular-cli.json file. I have used the following codes in the demotask.component.ts file, however, nothing happen.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'app-demotask',
  templateUrl: './demotask.component.html',
  styleUrls: [],
  encapsulation: ViewEncapsulation.None
})

It is now looking like the below screen shot:

enter image description here

It should look like the below:

enter image description here

Upvotes: 0

Views: 613

Answers (1)

Sravan
Sravan

Reputation: 18647

You can add multiple styles in a component using styleURL property.

Since app component is the main component, you can add multiple styles there.

Here is how it may look:

import {Component} from "angular2/core";

@Component({
    selector: "my-app",
    styleUrls: ["styles1.css", "styles2.css"],
    template: `
<StackLayout orientation="vertical">
    <Label [text]="message" class="title" (tap)="message = 'OHAI'"></Label>
</StackLayout>
`,
})
export class AppComponent {
    public message: string = "Hello, Angular!";
}

Upvotes: 3

Related Questions