Mobile Programming 3

angular
Event and property binding
Input information
[(ngmodel)]
[Link]
• <label for="name">Name</label>
• <input type="text" id="name" #personNameEl>
• <button (click)="onCreatePerson([Link])">Create</button>
TO
• <label for="name">Name</label>
• <input type="text" id="name" [(ngModel)]="enteredPersonName">
• <button (click)="onCreatePerson()">Create</button>
•
[Link]
• import { FormsModule } from '@angular/forms';
.
.
.

imports: [BrowserModule, FormsModule],

Passing Data around with custom event

[Link]

Event binding Import: Output, EventEmitter

[Link]
note : change person to yourname

• import { Component, Output, EventEmitter } from '@angular/core';

•
@Component({
• selector: 'app-person-input',
• templateUrl: './[Link]',
• styleUrls: ['./[Link]']
• })
• export class PersonInputComponent {
• @Output() personCreate = new EventEmitter<string>();
• enteredPersonName = '';
•
onCreatePerson() {
• [Link]('Created a person: ' + [Link]);
• [Link]([Link]);
• [Link] = '';
• }
• }
[Link]
Before
• <app-person-input></app-person-input>
• <app-persons [personList]="persons"></app-persons>

After  pass $event (reserve value in angular to pass data for event carries)

• <app-person-input (personCreate)="onPersonCreated($event)"></app-
person-input>
• <app-persons [personList]="persons"></app-persons>
•
[Link]
• persons: string[] = ['Max', 'Manuel', 'Anna'];
•
onPersonCreated(name: string) {
• [Link](name);
• }
>Above assignment 4
Routing  one html page 2 components
• Create a module for routing
[Link]
note: persons change to yourname

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

import { Routes, RouterModule } from '@angular/router';

import { PersonsComponent } from './persons/[Link]';

import { PersonInputComponent } from './persons/[Link]';

const routes: Routes = [

{ path: '', component: PersonsComponent },
{ path: 'input', component: PersonInputComponent }
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
App [Link]
import { AppRoutingModule } from './[Link]';
.
.
.
imports: [BrowserModule, FormsModule, AppRoutingModule],
Services
• Class that can interact with other component
[Link]
<ul>
<li *ngFor="let person of personList"
(click)="onRemovePerson(person)">
{{ person }}
</li>
</ul>
[Link]
• <a routerLink="/">Person List</a> | <a routerLink="/input">Input</a
>
• <hr>
• <router-outlet></router-outlet>
•
[Link]
• Create this file
[Link]
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })

export class PersonsService {
persons: string[] = ['Max', 'Manuel', 'Anna'];

addPerson(name: string) {
[Link](name);
[Link]([Link]);
}

removePerson(name: string) {
[Link] = [Link](person => {
return person !== name;
});
[Link]([Link]);
}
}
Because array already in service the [Link] .ts become

export class AppComponent {}

[Link]
note : change person to yourname
• import { Component } from '@angular/core';
•
import { PersonsService } from './[Link]';
•
@Component({
• selector: 'app-person-input',
• templateUrl: './[Link]',
• styleUrls: ['./[Link]']
• })
• export class PersonInputComponent {
• enteredPersonName = '';
•
constructor(private personsService: PersonsService) {}
•
onCreatePerson() {
• [Link]('Created a person: ' + [Link]);
• [Link]([Link]);
• [Link] = '';
• }
• }
[Link]
import { Component, OnInit } from '@angular/core';

import { PersonsService } from './[Link]';

@Component({

selector: 'app-persons',

templateUrl: './[Link]'

})

export class PersonsComponent implements OnInit {

personList: string[];

// private personService: PersonsService;

constructor(private prsService: PersonsService) {

// [Link] = [Link];

// [Link] = prsService;

ngOnInit() {

[Link] = [Link];

onRemovePerson(personName: string) {

[Link](personName);

}
[Link]
<a routerLink="/">Person List</a> | <a routerLink="/input">Input</a>
<hr>
<router-outlet></router-outlet>
Above assignment 5