Angular · Theory

App Bootstrap

Theory

26/43

App Bootstrap

App Bootstrap is a Angular topic. In plain words you use it for ng new marks-app in the terminal + browser. Don’t start with a slogan — start with that picture.

Smallest example: ng serve and open localhost. Type it, run it, and say what you see. If you can do that from memory, you know App Bootstrap.

From the example next to this theory — App Bootstrap: toggle open.

Trap — skipping Node version and blaming Angular. Fix that before you talk about advanced Angular.

Viva — what is App Bootstrap? Then show ng serve and open localhost. Then name the trap.

Exam tip

What is App Bootstrap? Show this: ng serve and open localhost. Trap: skipping Node version and blaming Angular.

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;
  }
}

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

Short notes

DefApp Bootstrap — ng new marks-app in the terminal + browser.
Ruleng serve and open localhost
Trapskipping Node version and blaming Angular
Usethe terminal + browser

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; } }

App Bootstrap

Example

Short notes

Questions

App Bootstrap

Example

Short notes

Questions