1a - Brief Introduction To Angular
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.
1. Create a new Angular CLI Project
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 .
2. Run the app
Run the below command 's' is short for serve.
ng s
Look at output.

3. Review the structure and key files
package.json
index.html
main.ts
app.module.ts
app.component.ts
app-routing.module.ts
4. Add a Home page component
Add home page component
ng generate component home
Add home component selector to the AppComponent and delete all default HTML except the router outlet.
<h1>The App</h1>
<app-home></app-home>
<router-outlet></router-outlet>
5. Add a route
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 { }
6. Event and data binding
Add event and data binding to Home component with a new title property
{{title}}
<input type="text" #input [value]="title" (keyup)="updateTitle(input.value)">
Add a function to the Home component.
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;
}
}
Last updated