ngFor

untuk buat ngFor row dan col. Jadikan ROW sebagai ngFor manakala col pula untuk render data. example:-

{{ bookmark.name}}

{{ bookmark.package_name}}

---

3) Angular : Data Binding

2) Angular : 3 Must Component file

component need at least this 3 component file

1. customers.component.ts

import { Component, OnInit } from '@angular/core';

@Component ({

selector: 'app-customers',

templateUrl:'./customers.component.html'

})

export class CustomersComponent implements OnInit{

title: string;

people: any[];

constructor(){}

ngOnInit() {

this.title = 'Customers';

this.people = [

{ id: 1, name: 'john Doe', city: 'Phoenix', orderTotal: 9.99, customerSince: new Date(2014, 7, 10) },

{ id: 2, name: 'Jane Doe', city: 'Chandler', orderTotal: 19.99, customerSince: new Date(2017, 2, 22)},

{ id: 3, name: 'Michelle Thomas', city: 'Seattle', orderTotal: 99.99, customerSince: new Date(2002, 10, 31)},

{ id: 4, name: 'Jim Thomas', city: 'New York', orderTotal: 599.99, customerSince: new Date(2002, 10, 31)},

];

}

}

2. customers.module.ts - membolehkan selector dirender pada html

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

import { CommonModule } from '@angular/common';

import { CustomersComponent } from './customers.component';

@NgModule({

imports: [ CommonModule ],

declarations: [ CustomersComponent ],

exports: [ CustomersComponent ] // buang bootstrap dan ganti dengan ini

})

export class CustomersModule { }

3. costumers.component.html - tempat keluar render

<h1> {{ title }}</h1>

<br>

Customers Go here

1) Angular : App Component Ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-root',

template: `

<h1>{{ title }}</h1>

`

})

export class AppComponent implements OnInit {

title: string;

constructor() { }

ngOnInit() {

// We call a service that gets us the data

this.title = 'Hello World';

}

}

hide component in angular 4

hide component in angular 4

<app-header *ngIf="1==2"> </app-header>

Angular : Manually Routing

Step 1: Make sure you have at least 2 Components

Syarat sah untuk bina routing adalah

• ada sekurang2nya 2 component
• guna cli dibawah untuk generate component baru

ng generate component about

ng g c about 

Step 2: Create an app.router.ts file

Kemudian dengan mengunakan editor ( VS e.g ) tepek code dibawah

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Tukarkan code2 ini dengan component anda

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component'; 

Ini pula proses selepas import iaitu tentukan kemana component tu hendak dibawa

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent } 

Step 3: Import the router to app.module.ts

Dah buat syarat tu, untuk membolehkan projek berjaya di build mesti dapat kebenaran dari module.ts

import { routes } from './app.router';

letak kat atas

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ], 

 Jangan lupa letak routes kat bahagian imports, kalau tak dia macam dah siap kerja tapi tak hantar kat lecturer.

Step 4: Add <router-outlet></router-outlet>

di app.component.html, letak:

<router-outlet></router-outlet>

Step 5: Add the routerLink directive

mula letak link kini bukan lagi a href di angular kita guna routerLink kalau dah routing

 <ul class="nav navbar-nav">
  <li>
    <a routerLink="about">About</a>
  </li>
  <li>
    <a routerLink="services">Services</a>
  </li>
</ul>

Step 6: Ensure <base href="/"> is in index.html

Kat index jangan lupa letak <base href="/">

dia mewakili routerLink..

Angular 6 : Project with scss & routing

ng new projName --style=scss --routing

this CLI will automatic add routing and scss

Angular From scratch

npm install -g @angular/cli

ng new AddAppName

cd AddAppName
ng serve --open

Locate and open AddAppName using code editor such as Visual Studio and open src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App!';
}

Between { } after  title = 'My First Angular App!'; you can add new 'key' and 'value' example such as

export class AppComponent {
title = 'My First Angular App!';
credit = 'my name is muhaza';
}

ADD MATERIAL DESIGN COMPONENT 

To start adding material design must install the material design npm first

npm install --save @angular/material @angular/cdk

Locate and open AddAppName using code editor such as Visual Studio and open src/app/app.module.ts

and now we can start adding component on design

https://material.angular.io/components

Solve angular serve problem

Problem

$ ng serve --open
Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and types                                                             cript in
devDependencies, then delete node_modules and package-lock.json (if you have one                                                             ) and
run npm install again.

Solve

npm install --save @angular/compiler-cli