1/8/2019

New

Component
Interpolation

The Angular Component

Angular applications are made up of multiple components. An Angular component is composed of HTML (the View) and a Component class that manipulates parts of the screen.

Angular documentation on Components

Example


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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { 
    name = 'Angular'; 
}

import... -This line is telling the compiler to import 'Component' from angular-tour-of-heroes/node_modules/@angular/core

@Component -This is the 'Component Decorator' identifying the class immediately below as a 'Component' class

selector -Components are kind of like custom html elements. The selector is the custom elements name

template -The actual html to display

class -javascript class

Example


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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { 
    name = 'Angular'; 
}

Input


<my-app></my-app>

Output


<h1>Hello Angular</h1>

Interpolation

Interpolation is the method to display a component property in a template.

Syntax


@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

How does the component get injected into the index.html that the user sees?

Bootstrapping

Documentation on Bootstrapping

Using TOH as an example


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

	hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

We have a heroes component with the selector 'app-heroes'

app.component.html


{{title}}

The app-heroes selector is then used as an 'element' in app.component.html

AppComponent is the 'default' root for a new angular app generated by Angular CLI

app.component.html


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.html is the template for the AppComponent angular component.

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts, the default root module generated by Angular CLI, 'bootstraps' AppComponent.

This means it takes the AppComponent and injects it into index.html

index.html

This is the html file served up by the server that serves as our 'single page'. Notice app-root tag in the body.

Summary

HeroesComponent is injected into AppComponent which is bootstraped by AppModule and injected into index.html