2. Create a home component

In this section we will add a Home page component and configure an associated route.

  • Update app.component.html as follows.

  • Add home component selector to the AppComponent and delete all default HTML.

  • Add a router-outlet which we will use in a second to output our custom angular components with Angular's router. This will break our app until we configure the RouterModule in the next step.

  • Add the RouterModule and a default route pointing to a 'home' path in the URL i.e. http://localhost:4200/home.

  • Add a redirect path to redirect to home if no path is provided.

The double curly braces are template binding used to put dynamic data onto our HTML. The square braces are for property binding and the round braces event binding. We can access the properties and methods of elements custom or not with the hash symbol called template references.

src/app/home/containers/home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title: string = 'The title';
  constructor() {}

  ngOnInit() {}

  updateTitle(value) {
    console.log(`updateTitle: ${value}`);
    this.title = value;
  }
}

  • Remove the <app-home></app-home> selector from the AppComponent template, from now on we will just use the router to display the HomeComponent when we navigate to http://localhost:4200/home.

1. Add a Home page component

  • Add home page component using the Angular CLI by running the following in the terminal.

ng generate component home/containers/home

  • Add home component selector to the AppComponent and delete all default HTML.

  • Add a router-outlet which we will use in a second to output our custom angular components with Angular's router. This will break our app until we configure the RouterModule in the next step.

  • Use the new HomeComponent's selector to add it to the AppComponent's template so we can see adding components with the router and / or the selector of a component.

src/app/app.component.html
<h1>The App</h1>
​
<app-home></app-home>
<router-outlet></router-outlet>

2. Add a HomeComponent route

  • Add the RouterModule and a default route pointing to a 'home' path in the url i.e. http://localhost:4200/home

  • Add a redirect path to redirect to home if no path is provided.

src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/containers/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: 'home' },
      { path: 'home', component: HomeComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Explore template event and data binding

The double curly braces are for template binding used to put dynamic data onto our HTML. The square braces are for property binding and the round braces event binding. We can access the properties and methods of elements custom or not with the hash symbol called template references.

  • Add event and data binding to Home component with a new title property.

src/app/home/containers/home.component.html
{{title}}

<input type="text" #input [value]="title" (keyup)="updateTitle(input.value)">

  • Add a function to the Home component to update the title, output the updated title to the console log, to check it is working.

src/app/home/containers/home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title: string;
  constructor() {}

  ngOnInit() {}

  updateTitle(value) {
    console.log(`updateTitle: ${value}`);
    this.title = value;
  }
}

  • Remove the <app-home></app-home> selector from the AppComponent template, from now on we will just use the router to display the HomeComponent when we are navigated to 'localhost://4200/home'

<h1>The App</h1>
​
<router-outlet></router-outlet>

StackBlitz Link

  • If you want to see a running version of the workshop up to this point click on the StackBlitz link block below.

If you have no heard of StackBlitz it is Visual Studio Code in the browser. What is even cooler if you look at the url it is loading below it is loading our app from the GitHub repo for the demo app at this branch '2-create-a-home-component'. https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/2-create-a-home-component****

Previous1. Create an applicationNext3. Test HomeComponent

Last updated