angular style code example

Example 1: ngstyle

<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>

Example 2: ng style

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

Example 3: ng-deep

::ng-deep{
	// some css
}

Example 4: styles in angular component

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

Example 5: angular inline component

> ng generate component <component-name> --inlineTemplate=true --inlineStyle=true