Angular 4 vs. Angular 5

Angular 5 generate Component, Directive, Pipe, Service, Class and Module - Angular CLI

Angular CLI - Angular 5 generate Component, Directive, Pipe, Service, Class and Module

How To Create a new Pipe in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “CardPipe” is the name of Pipe.

The executed Command looks like -
D:\Angular\my-app>ng g pipe CardPipe
  create src/app/card-pipe.pipe.spec.ts (196 bytes)
  create src/app/card-pipe.pipe.ts (205 bytes)
  update src/app/app.module.ts (653 bytes)


Example –
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cardPipe'
})
export class CardPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return "****-****-****";
  }
}

How To Create a new component in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “User” is the name of component.

The executed Command looks like -
D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

Example looks like –
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }
}

How To Create a new directive in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “myUserDir” is the name of directive.

The executed Command looks like -
D:\Angular\my-app>ng g directive myUserDir
  create src/app/my-user-dir.directive.spec.ts (238 bytes)
  create src/app/my-user-dir.directive.ts (147 bytes)
  update src/app/app.module.ts (739 bytes)

And Example looks like –
import { Directive } from '@angular/core';

@Directive({
  selector: '[appMyUserDir]'
})
export class MyUserDirDirective {
  constructor() { }

}

How To Create a new service in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “myUserServ” is the name of service.

The Executed command looks like -
D:\Angular\my-app>ng g service myUserServ
  create src/app/my-user-serv.service.spec.ts (400 bytes)
  create src/app/my-user-serv.service.ts (116 bytes)

And Example looks like –
import { Injectable } from '@angular/core';

@Injectable()
export class MyUserServService {
  constructor() { }

}

How To Create a new class in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “myUserClass” is the name of class.

The Executed command looks like -
D:\Angular\my-app>ng g class myUserClass
  create src/app/my-user-class.ts (29 bytes)

And Example looks like –
export class MyUserClass {
   
}

How To Create a new module in Angular 5 using Angular CLI?
Here “D:\Angular\my-app>” is my Angular application Project Directory and the “myUserModule” is the name of module.

The Executed command looks like -
D:\Angular\my-app>ng g module myUserModule
  create src/app/my-user-module/my-user-module.module.ts (196 bytes)

And Example looks like –
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class MyUserModuleModule { }


I hope you are enjoying with this post! Please share with you friends. Thank you so much!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 5 generate Component, Directive, Pipe, Service, Class and Module - Angular CLI Angular 5 generate Component, Directive, Pipe, Service, Class and Module - Angular CLI Reviewed by Anil Singh on 2:40 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^