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 @

  1. Clone the official repo from github.
  2. install with npm install
  3. 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';

    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'

    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';

  imports: [ BrowserModule ],
  declarations: [
  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.


Leave a comment or contact me via Twitter @huckbit

comments powered by Disqus

Related Posts