Mobile Programming 3

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

imports: [BrowserModule, FormsModule],
Passing Data around with custom event

person-input.component.ts

Event binding Import: Output, EventEmitter

person-input.component.ts
note : change person to yourname

• import { Component, Output, EventEmitter } from '@angular/core';
•
@Component({
•   selector: 'app-person-input',
•   templateUrl: './person-input.component.html',
•   styleUrls: ['./person-input.component.css']
• })
• export class PersonInputComponent {
•   @Output() personCreate = new EventEmitter<string>();
•   enteredPersonName = '';
•
  onCreatePerson() {
•     console.log('Created a person: ' + this.enteredPersonName);
•     this.personCreate.emit(this.enteredPersonName);
•     this.enteredPersonName = '';
•   }
•}
app.component.html
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>
app.component.ts
•  persons: string[] = ['Max', 'Manuel', 'Anna'];
•
  onPersonCreated(name: string) {
•     this.persons.push(name);
•   }
>Above assignment 4
Routing  one html page 2 components
• Create a module for routing
app-routing.module.ts
note: persons change to yourname

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

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

import { PersonsComponent } from './persons/persons.component';

import { PersonInputComponent } from './persons/person-input.component';

const routes: Routes = [

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

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

@Injectable({ providedIn: 'root' })

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

addPerson(name: string) {
this.persons.push(name);
console.log(this.persons);
}

removePerson(name: string) {
this.persons = this.persons.filter(person => {
return person !== name;
});
console.log(this.persons);
}
}
Because array already in service the app.component .ts become

export class AppComponent {}
person-input.component.ts
note : change person to yourname
• import { Component } from '@angular/core';
•
import { PersonsService } from './persons.service';
•
@Component({
•   selector: 'app-person-input',
•   templateUrl: './person-input.component.html',
•   styleUrls: ['./person-input.component.css']
• })
• export class PersonInputComponent {
•   enteredPersonName = '';
•
  constructor(private personsService: PersonsService) {}
•
  onCreatePerson() {
•     console.log('Created a person: ' + this.enteredPersonName);
•     this.personsService.addPerson(this.enteredPersonName);
•     this.enteredPersonName = '';
•   }
•}
persons.component.ts
import { Component, OnInit } from '@angular/core';

import { PersonsService } from './persons.service';

@Component({
selector: 'app-persons',
templateUrl: './persons.component.html'
})
export class PersonsComponent implements OnInit {
personList: string[];
// private personService: PersonsService;

constructor(private prsService: PersonsService) {

// this.personList = prsService.persons;
// this.personService = prsService;
}

ngOnInit() {
this.personList = this.prsService.persons;
}

onRemovePerson(personName: string) {
this.prsService.removePerson(personName);
}
}
App.component.html
<a routerLink="/">Person List</a> | <a routerLink="/input">Input</a>
<hr>
<router-outlet></router-outlet>
Above assignment 5