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!
|
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..
|
