Author: admin

—-HTML file (app.component)

<app-home [ninja]="ninja" (onYell)="yell($event)">hello there!</app-home>

—-TS file (app.component)

yell(e){
 alert("I am yelling");
 console.log(e);
}

—-HTML file (home.component)

<button (click)="fireYellEvent($event)">Hit me</button>

 

—-TS file (home.component)

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

@Output() onYell = new EventEmitter();
fireYellEvent(e){
 this.onYell.emit(e);
}

Pass data into one component to other component using @Input.

—-HTML file (app.component)

<app-home [ninja]="ninja">hello there!</app-home>

—-TS file (app.component)

ninja = {
  name: 'Ryu',
  belt: 'Red'
}

—-HTML file (home.component)

<p>{{ninja.name}}</p>
<p>{{ninja.belt}}</p>

—-TS file (home.component)

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

export class HomeComponent implements OnInit {
@Input() ninja;

Two-way data binding combines the input and output binding into a single notation using the ngModel directive.

—-HTML file

<label>Name:</label>
<input [(ngModel)]="ninja.name">
<label>Belt:</label>
<input [(ngModel)]="ninja.belt">
<p>{{ninja.name}}</p>
<p>{{ninja.belt}}</p>

—-TS File (Component)

ninja = {
  name: 'Yoshi',
  belt: 'Black'
 };

An event handler is specified inside the template using round brackets to denote event binding. This event handler is then coded in the class to process the event.

Bind events to HTML elements

• Bind to native events (such as click events):
  • <button (click)=”function”>
• Bind to custom events we make
  • <app-home (update)=”function”></app-home>

—-HTML file

<button (click)="alertMe('I like beef')">Click Me</button>

—-TS File (Component)

alertMe(val){
   alert(val);
}

Replace interpolation to property binding

<p>{{ allowNewServer }}</p>

to

<p [innerText]="allowNewServer"></p>

Property Binding

Square blacked indicates this property binding.

—-Html file (servers.component)

<button class="btn btn-primary" [disabled]="allowNewServer">Add Server</button>

 

—-Ts file (app.component)

allowNewServer = false;

constructor() {
setTimeout(() => {
this.allowNewServer = true;
}, 2000);
}

After 2 second button will be enable.

Databinding means communication with files.

String Interpolation

Pass data from TS file to html file with {{}} with string interpolation symbol. In this case number easily convert into string.

—-Html file (server.component)

<p>{{ 'Server' }} with ID {{ serverId }} is {{ serverStatus }}</p>

 

—-Ts file (server.component)

export class ServerComponent{
    serverId:number = 10;
    serverStatus:string = 'offline';
}

---

Status with function

—-Ts file (server.component)

getServerStatus(){
return this.serverStatus;
}

 

—-Html file (app.component)

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

 

Everything is still same.

Directives is just an Instruction that tells to Angular what to do.

Directives are three types:

Component

import {Component} from 'angular/core'
@Component({
selector: 'my-app',
template: `<h3>The Super Button</h3><button (click)="btnClick()">Click Me</button>`
})

export class App {
}

---

Attributes
Attributes Directives interact with the Element to which they are applied to (e.g. change the style) (Examples: ngClass, ngStyle)

---

Structural
Structural Directive interact with the current view container and change the structure of the DOM/HTML Code.
(Examples: *ngIf, *ngFor)

---

Ng-Content Directive

Ng-content will be show directive contents.

<app-home>Hello there!</app-home>

Use ng-content on home component file.

<ng-content></ng-content>

Create Component in Angular 4

Type ng g c (Component name like 'home') for Create Component

 

 

CLI automatic update app.module.ts

 

—-Html file (app.component)

Update app-server to app-servers tag.

<app-servers></app-servers>

---

Create Manual Component

home.component.html

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

home.component.ts

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

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
title="Hello Angular 2"
}

Register Component

app.module.ts

import { HomeComponent } from "./home/home.component";
  declarations: [
    HomeComponent
  ],

---

Working with Component Templates

Change templateUrl to template in servers.component.ts

—-Ts file (servers.component)

templateUrl: './servers.component.html',

to

template: '<app-server></app-server><app-server></app-server>',

Looks still same here event we remove templateUrl to template.

For multiple Line
For multiple line in our template file. Use ` instead of ‘.

template: '<app-server></app-server><app-server></app-server>',

to

template: `
<app-server></app-server>
<app-server></app-server>`,

---

Working with Component Styles

Change styleUrls to styles in app.component.ts

—-Ts file (app.component)

styleUrls: ['./app.component.css']

to

//styleUrls: ['./app.component.css']
styles: [`
h1{
color: dodgerblue;
}
`]

---

Fully Understanding the Component Selector

Selector should be unique every time. Normally selector like this.

—-Ts file (app.servers)

selector: 'app-servers',

Attribute selector

selector: '[app-servers]',

 

—-Html file (app.component)

<div app-servers></div>

---

Class selector

selector:'.app-servers',

—-Html file (app.component)

<div class="app-servers"></div>

Something Like that:
Date increment in javascript

---

add this JS code.

JS

function incraseDate(date){
    var cDay = date.split('/')[0];
    var cMonth = date.split('/')[1];
    var cYear = date.split('/')[2];
    var newDate = parseInt(cDay) + 1 + ',' + cMonth + ',' + cYear;
    return newDate.split(',').join('/');
}

document.write(incraseDate('26/3/2018'))

---

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”oqGQxN” default_tab=”js,result” user=”pradeepanvi”]See the Pen Date increment in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

---