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
{ }
Stayed Informed - Angular 5 Interview Questions and Answers
I hope you are enjoying with this post!
Please share with you friends. Thank you so much!