description |
---|
In the next few sections we will review the main part of Angular. In this first part we will review creating a CLI app and using event and property binding with templates. |
{% hint style="info" %} The finished code for the next three parts can be found here https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only
git clone "https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only"
cd workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only
npm install
{% endhint %}
- Make a new workshop folder and generate a new CLI app
mkdir workshop
cd workshop
ng new angular-cli-app --routing
Change directory into the new app's directory and open it with VS Code
cd angular-cli-app
code .
- Run the below command 's' is short for serve.
ng s
Look at output.
- package.json
- index.html
- main.ts
- app.module.ts
- app.component.ts
- app-routing.module.ts
- Add home page component
ng generate component home
- Add home component selector to the AppComponent and delete all default HTML except the router outlet.
{% code title="src/app/app.component.html" %}
<h1>The App</h1>
<app-home></app-home>
<router-outlet></router-outlet>
{% endcode %}
{% code title="src/app/spp-routing.module.ts" %}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
{% endcode %}
- Add event and data binding to Home component with a new title property
{% code title="src/app/home/home.component.html" %}
{{title}}
<input type="text" #input [value]="title" (keyup)="updateTitle(input.value)">
{% endcode %}
- Add a function to the Home component.
{% code title="src/app/home/home.component.ts" %}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
title: string;
constructor() {}
ngOnInit() {}
updateTitle(value) {
// debugger;
console.log(`updateTitle: ${value}`);
this.title = value;
}
}
{% endcode %}