Angular 2 Components Introduction


This blog post is an introduction to components in Angular 2. Components are perhaps the first thing you learn about in Angular 2 after you have set up your development environment. Why? As the learnangular2.com website says: “In Angular 2, “everything is a component.” Components are the main way we build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components”.

The previous post, Angular 2 Installation Introduction discusses setting up your environment. It is based on the YouTube video called Angular 2 in 60 Minutes by Traversy Media.

IDE

There are two good IDE’s you can use to develop in Angular 2: Microsoft Visual Studio Code or Atom. I am using Visual Studio Code in this example (the same one as in the YouTube video). In VS Code, open the folder called myapp, if that’s the name of your project.

myapp

The only change made to the QuickStart installation in the previous blog post was to change the name of the application to myapp from my-proj. In the real world you will likely use a more descriptive name that myapp, but for this purpose of learning Agular 2, we will use the same name that was used in the YouTube video called Angular 2 in 60 Minutes.

The code below shows the index.html file that was created.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

In the code above, notice that in the body tag there is the my-app tag.

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}} </h1>`,
})
export class AppComponent  { 
  name = 'John Doe'; // website says: Hello John Doe
  }

Create Your Own Component

We are given the app.component.ts that is very similar to the one above, except for the fact that I changed the word Angular for John Doe. So, under the app folder, create a new folder called components. Under that folder create a new file called user.component.ts. Next, copy everything we have in the app.component.ts file into the new user.component.ts. In the user.component.ts file, change the selector to user. Change the class name from AppComponent to UserComponent.

When you add a component you need to add it to the app.module.ts file. With the import statement. You also need to add it to the declarations.

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { UserComponent }  from './components/user.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UserComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Go back to the app.component.ts file and delete some code. Have a look at the template section. Recall that we used user as the selector in the user.component.ts file. Add a “user” open and close tag to the template section. Delete the code in the class. The results are shown below.

app.component.ts (again)

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

@Component({
  selector: 'my-app',
  template: `
    <user></user>
  `,
})
export class AppComponent  {  

}

What’s Next?

The next post will make changes to the component by adding some new content. We will add an object, a constructor, an array and an interface. This component is designed to display information about a particular user. Therefor we will be adding data such as their address.

Leave a comment

Your email address will not be published. Required fields are marked *