Scribd
Upload
14 views

Mobile Programming 3 Try Angular

The document discusses Angular concepts including event and property binding, passing data between components using custom events, routing to display different components on the same page, and creating a shared service to manage component data and interactions. Key points: - It shows how to use property and event binding to pass data between an input and component property. - It demonstrates creating a custom event to emit data from a child to parent component. - Routing is configured to display different components at route paths, with a shared outlet to render components. - A shared PersonsService is created to manage person data through methods to add, remove, and retrieve persons. Components inject this service to interact with the shared data

Uploaded by

sasongko wardhana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Mobile Programming 3 Try Angular

The document discusses Angular concepts including event and property binding, passing data between components using custom events, routing to display different components on the same page, and creating a shared service to manage component data and interactions. Key points: - It shows how to use property and event binding to pass data between an input and component property. - It demonstrates creating a custom event to emit data from a child to parent component. - Routing is configured to display different components at route paths, with a shared outlet to render components. - A shared PersonsService is created to manage person data through methods to add, remove, and retrieve persons. Components inject this service to interact with the shared data

Uploaded by

sasongko wardhana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like