Angular · Theory

Styling

← All stacks

Theory

22/43

Styling

Don’t start Styling with jargon. Start with red Fail / green Pass. That is the whole point.

Keep Styling small. Kabir should finish red Fail / green Pass in a few lines, not a 40-line dump.

Without Styling, the mark sheet gets messy and red Fail / green Pass is hard to trust.

Styling shows up in the mark sheet. Name red Fail / green Pass, not “a real-world scenario”.

Styling miss — hard-coding colour in TS only. Fix it before you talk about advanced Angular.

After Styling, Kabir should still remember hard-coding colour in TS only.

Close Styling with — “If I skip it, red Fail / green Pass goes wrong like this: hard-coding colour in TS only.”

Exam tip

Say Styling in one breath, then [ngClass] or [style.color], then hard-coding colour in TS only.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Styling: toggle open. Say whether the panel is on screen after one click.

Short notes

DefStyling — Kabir uses it for red Fail / green Pass in the mark sheet.
RuleStyling → [ngClass] or [style.color].
RememberStyling + change detection (the mark sheet).
UseStyling in the mark sheet (red Fail / green Pass).
TrapStyling — hard-coding colour in TS only.
ExStyling → red Fail / green Pass.

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

Styling

Example

Short notes

Questions

Styling

Example

Short notes

Questions