Adding Components, Pipes and Services to a Module


Adding Components, Pipes and Services to a Module

Adding Components, Pipes and Services to a Module, In previous post we learnt what is Angular module so i am going to extend the last example.

Once we created any new component, pipe or service, then we need to update into root module, otherwise Angular is not going to be able to compile our application.

Add Angular Component

Suppose we have created one new Angular Component student.component.ts newly and we want to add it any main module so that Angular framework can detect.

student.component.ts

import { Component } from '@angular/core';
@Component({
  selector:'student',
  templateUrl:'./student.html'
})

export class LoginComponent {
  name:string="Vikas";
  constructor() { }
}

Now let’s understand how to add above Component in Angular Module, To add any Angular Component in any module just import required component and declare in declarations section of @NgModule

import { NgModule } from '@angular/core';
import { StudentComponent } from './student/student.component'

@NgModule({
  declarations: [
     StudentComponent
  ],
imports: [],

providers: [],
bootstrap: []

})

export class AppModule { }

Add Angular Service

For example we have one new Logger service and we want to add this service in any main module so  that Angular can detect our service class.

As we know service is just a normal class until we register this component class with an Angular dependency injector.

We can tell Angular to inject a dependency in the component’s constructor by specifying a constructor parameter with the dependency type please make sure before specifying a constructor parameter with the dependency type you have to declare your service in providers section of any @ngModule

Please follow Angular 2 Dependency injection post for more details

 

 






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229