Components Angular2 RC6
directives properties are deprecated
In Angular2 before the new version, released on September 2016, to add a new component we used:
directives : [NameComponent]
inside @component.
Now, directives properties from Angular2 version RC6 are deprecated, and we are going to use NgModule declarations instead of directives.
To better understand we are going to start from the official QuickStart @ Angular.io:
- Clone the official Angular.io repo from github.
- install with
npm install - start the server with
npm start
Now let’s create our new component, I called mine new.component.ts and this is what inside:
import { Component } from '@angular/core';
@Component({
selector: 'new-component',
template: `<h1></h1>`
})
export class NewComponent {
title = "this is the new component"
}
Now, in app.component.ts, change in the template the quotes with back-ticks to have multiple line and add:
<new-component>Loading new component ...</new-component>
This is my final app.component.ts:
import { Component } from '@angular/core';
import { NewComponent } from './new.component'
@Component({
selector: 'my-app',
template: `
<h1>My First Angular App</h1>
<new-component>Loading new component ...</new-component>
`
})
export class AppComponent { }
Now add to app.module.ts, after the component’s import:
import { NewComponent } from './new.component'
Then in the NgModule in declarations add the new component NewComponent.
This is my final app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NewComponent } from './new.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
NewComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Now you can see the new component inside the page.
Watch the following video to see how to create a new component step by step.
