Month: December 2018

Databinding – Two-Way-Databinding in Angular

- by mahmood

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public serverName = 'Test Server';

  constructor() {
  }

  ngOnInit() {
  }

}

server.component.html

<label>Server Name</label>
<input type="text" [(ngModel)]="serverName">
<p>{{serverName}}</p>

Example 2

<my-cmp [(title)]="name">

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

References
https://github.com/mhdr/AngularSamples/tree/master/008/mya-pp

Databinding – Passing and Using Data with Event Binding in Angular

- by mahmood

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public serverName: String = '';

  constructor() {
  }

  ngOnInit() {
  }

  onUpdateServerName(event: Event) {
    this.serverName = (<HTMLInputElement> event.target).value;
  }
}

server.component.html

<label>Server Name</label>
<br>
<input type="text" (input)="onUpdateServerName($event)">
<p>{{serverName}}</p>

References
https://github.com/mhdr/AngularSamples/tree/master/007/my-app

Databinding – Event Binding in Angular

- by mahmood

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public serverCreationStatus: String = 'No server was created';

  constructor() {
  }

  ngOnInit() {
  }

  onCreateServer() {
    this.serverCreationStatus = 'Server was created';
  }

}

server.component.html

<button (click)="onCreateServer()">Add Server</button>
<p>{{serverCreationStatus}}</p>

 

Databinding – Property Binding in Angular

- by mahmood

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public allowAddServer: Boolean = false;

  constructor() {

    setTimeout(() => {
      this.allowAddServer = true; // after 2 seconds enable the button
    }, 2000);

  }

  ngOnInit() {
  }

}

server.component.html

<button [disabled]="!allowAddServer">Add Server</button>
<p [innerText]="allowAddServer"></p>

References
https://github.com/mhdr/AngularSamples/tree/master/005/my-app

Databinding – String Interpolation in Angular

- by mahmood

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public serverId: Number = 10;
  private serverStatus: String = 'Offline';

  constructor() { }

  public getServerStatus(): String {
    return this.serverStatus;
  }

  ngOnInit() {
  }

}

server.component.html

<p>
  Server with ID {{serverId}} is {{getServerStatus()}}
</p>

References
https://github.com/mhdr/AngularSamples/tree/master/004/my-app

Creating and Using a new Component in Angular

- by mahmood


Or using CLI :

ng generate component server

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>Hello World</div>

<app-server></app-server>

References
https://github.com/mhdr/AngularSamples/tree/master/002/my-app