Scribd
Upload
10 views

Mobile Programming Ionic Angular

This document provides instructions for setting up an Angular development environment and creating basic Angular components. It discusses installing Node.js, Angular CLI, creating a new project, component structure, communicating between components using inputs and outputs, and handling user input with forms. Key steps include using npm to install Angular CLI, generating a new project with `ng new`, creating components with `ng generate component`, using `@Input()` and `@Output()` for inter-component communication, and binding to form elements for user input. Example components like PersonsComponent and PersonInputComponent are demonstrated.

Uploaded by

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

Mobile Programming Ionic Angular

This document provides instructions for setting up an Angular development environment and creating basic Angular components. It discusses installing Node.js, Angular CLI, creating a new project, component structure, communicating between components using inputs and outputs, and handling user input with forms. Key steps include using npm to install Angular CLI, generating a new project with `ng new`, creating components with `ng generate component`, using `@Input()` and `@Output()` for inter-component communication, and binding to form elements for user input. Example components like PersonsComponent and PersonInputComponent are demonstrated.

Uploaded by

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

Mobile Programming 2

angular
• Git bash  Shell on windows
• Visual studio code  editor , extension angular, angular script, tslint
• Node js  get npm
• From git bash , using npm install angular
• If you have installed, check user system environment. User variables
C:\Users\SBW\AppData\Roaming\npm
System variables
C:\Program Files\nodejs\

• npm uninstall -g @angular/cli


npm install -g @angular/cli
Module angular
• Component consists of
Install angular cli
npm install –g @angular/cli

Link
https://cli.angular.io/

Click documentation
Create project
ng new myProject
ng new yourname01
• e2e : end to end
cd yourprojectname
• ng serve –o
open http://localhost:4200/
Angular File Structure
https://angular.io/guide/file-structure
• Src/main.ts
• import { AppModule } from './app/app.module';
• Meaning : src/app/app.module.ts
• Index.html
• <body>
• <app-root></app-root>
• </body>
New Components
Create directory src/app/yourname
Under this directory create files :
yourname.component.html
yourname.component.ts
Yourname.component.ts
• import { Component } from '@angular/core';
•
@Component({
• selector: 'app-yourname',
• templateUrl: './yourname.component.html'
• })
• export class YournameComponent {}
app.module.ts
ADD
• import { PersonsComponent } from './yourname/yourname.compone
nt';
………..
declarations: [AppComponent, YournameComponent],
yourname.component.html

<p>Good Morning ALI</p>


app.component.html
Delete the content..
Change to
<app-persons></app-persons>
…… change persons to yourname
Cross Components & Directives
How Components can communicate with each others ??
app.component.ts
Change title ….
To:
persons: string[] = ['Max', 'Manuel', 'Anna'];
yourname.component.ts
• import { Component, Input } from '@angular/core';

• export class YournameComponent {


• @Input() personList: string[];
•}
yourname.component.html
Binding to component.html 

• <ul>
• <li *ngFor="let person of personList">{{ person }}</li>
• </ul>
app.component.html
<app-persons [personList]="persons"></app-persons>
User Input
person-input.component.ts
note : change person to yourname

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


•
@Component({
• selector: 'app-person-input',
• templateUrl: './person-input.component.html',
• styleUrls: ['./person-input.component.css']
• })
• export class PersonInputComponent {
• onCreatePerson(personName: string) {
• console.log('Created a person: ' + personName);
• }
• }
•
app.component.html
• <app-person-input></app-person-input>
• <app-persons [personList]="persons"></app-persons>
app-module.ts
Modify… type PersonInputComponent on declarations

declarations: [AppComponent, PersonsComponent, PersonInputCompo


nent],
person-input.component.html
• <label for="name">Name</label>
• <input type="text" id="name" #personNameEl>
• <button (click)="onCreatePerson(personNameEl.value)">Create</butt
on>

Note : #personNameEl is element


person-input.component.css
• label,
• input,
• button {
• display: block;
•}
• Assignment :
1. Display “Good Morning Ali” … Directory Yourname1
2. Display string array.. Directory Yourname2
3. Handle Input, output in console … Directory Yourname3

You might also like