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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions