The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Create a Simple Angular 2 Component

Create a Simple Angular 2 Component

2:10
The simplest way to create a new component is again to use the Angular CLI. The Angular CLI can quickly generate components for you to use inside your modules and your templates. This lesson walks through using the Angular CLI to generate an Angular 2 Component then using that Component in your application.
Watch this lesson now
Avatar
egghead.io

Once you have an App Component set up, you can now add additional Components. This video walks you through creating a simple component and adding it to you App Component through the Directives Array.

Avatar
Martin

Hi John. @View decorator is optional as from version 39. I think it's better to use just only 4 angular decorators @Component, @Directive, @Pipe, @Injectable.

Much simpler to explain to a newcomer imo.
What do you think?

and btw, THANK YOU for the free lessons!

In reply to egghead.io
Avatar
Joel

Yup! That will be the first update. It is much easier to remember where to put config without @View

In reply to Martin
Avatar
EBIA

Why are you writing angular2 twice ? 'angular2/angular2' ?

Avatar
Ruben

It seems like some stuff has changed in the meantime with later releases of Angular 2 and that's probably the reason I'm walking into a problem getting this to work.
I'm just seeing a blank screen after loading.

My app component is called angular2-fundamentals-app and looks like this:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'angular2-fundamentals-app',
  template: `
    <div>
        <app-simple-form></app-simple-form>
    </div>
  `,
  styleUrls: ['angular2-fundamentals.component.css']
})
export class Angular2FundamentalsAppComponent {
  title = `Let's get started!`;
}

The simple form component looks like this:

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-simple-form',
  template: `
    <p>
      simple-form Works!
    </p>
  `,
  styles: []
})
export class SimpleFormComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

I don't see any errors in the console and when I change up the app component to just display some text it works. It just won't render the simple form component.

Any ideas?

Avatar

I had the same. I fixed by getting the latest Release version of angular-cli.

Check the version of angular-cli you are running by typing

ng --version

if seeing something like v0.0..., you need to reinstall by following instructions in https://github.com/angular/angular-cli#updating-angular-cli.

I didn't bother reinstalling the npm modules in the project, I started from scratch again.

In reply to Ruben
Avatar
Ruben

Thanks mate, that fixed it for me as well. After updating I had to recreate the project, but that did solve the issue I had.

Currently running v1.0.0-beta.20-4 of ng-cli and before it was 0.0.39 I believe.

In reply to
Avatar
Danny

Same here. 10x for sharing the solution, but I am trying to install the new version of angular-cli and seems it doesn't update the version I already have 0.1.0 :-/

Update and Solution:

If you have trouble update angular-cli, you probably will need first to update your npm.
Follow this:

  1. npm cache clean
  2. npm uninstall -g angular-cli
  3. npm install npm@latest -g
  4. npm install -g angular-cli

Hope it helps!

In reply to Ruben
Avatar
Cameron

Ruben's step was essential, the file configuration was different for me after I updated npm. However, when I set up the framework there were different files than in the video; I also had an app.component.css and an app.component.html file in the app folder. In order to get the special-form.component.ts to function I had to place the app-special-form call in the app.component.html file. Is this correct or is there another way to do this?

In reply to Danny
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?