# 2. Create a home component

* 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.

{% code title="src/app/home/containers/home.component.ts" %}

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

{% endcode %}

* 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 <a href="#id-4-add-a-home-page-component" id="id-4-add-a-home-page-component"></a>

* 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.

{% code title="src/app/app.component.html" %}

```markup
<h1>The App</h1>
​
<app-home></app-home>
<router-outlet></router-outlet>
```

{% endcode %}

## 2. Add a HomeComponent route <a href="#id-5-add-a-route" id="id-5-add-a-route"></a>

* 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.

{% code title="src/app/app.module.ts" %}

```typescript
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 { }
```

{% endcode %}

## 3. Explore template event and data binding <a href="#id-6-event-and-data-binding" id="id-6-event-and-data-binding"></a>

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.

{% code title="src/app/home/containers/home.component.html" %}

```markup
{{title}}

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

{% endcode %}

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

{% code title="src/app/home/containers/home.component.ts" %}

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

{% endcode %}

* 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'

```markup
<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.

{% hint style="info" %}
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**](https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/2-create-a-home-component)\*\*\*\*
{% endhint %}

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/2-create-a-home-component>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://duncanhunter.gitbook.io/angular-and-ngrx/2.-create-a-home-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.