Components with Angular 6 CLI

Components with Angular 6 CLI

First of all, navigate to src/app/ open the app.component.html file and delete the content of it. The website should be blank. As you can see there are some files the CLI has created for us. It's the app.component.ts file, this is the main component file from our app. A app.component.css stylesheet, a app.component.html view file and a app.component.spec.ts file for testing purposes and we will talk about it later. Open the app.component.ts and you will see these files are registered in the Component already!.

Create a component with Angular 6 CLI

Now let's use the Angular CLI to create a new component. This is straight forward, type ng generate component post-list. Your output should look something like this

CREATE src/app/post-list/post-list.component.css (0 bytes)
CREATE src/app/post-list/post-list.component.html (28 bytes)
CREATE src/app/post-list/post-list.component.spec.ts (643 bytes)
CREATE src/app/post-list/post-list.component.ts (280 bytes)
UPDATE src/app/app.module.ts (406 bytes)

As you can see, the CLI takes care of everything, it created a directory posts-list, a stylesheet file, the view file, the test file, registered these files in post-list.component.ts and registered the component in the app.module.ts file. For now just ignore the app.module.ts we will talk about it later.

If you open post-list.component.ts you will see the templateUrl and the styleUrls properties referencing the automatically generated files.

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})

As you may have noticed there is also a property selector this is the identifier for the created component which we can reference from any other component. So let's do this by opening the app.component.html file and add following tag attribute.

<app-post-list></app-post-list>

Check your website and you should see post-list-works!. Great you have created your first component and used it inside another component!

Create a list of posts with Angular 6

Navigate to the post-list.component.ts file and remove the inheritance of OnInit to have a minimal class and a clean start. See the code below.

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

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent {}

Let's create a mocked list of posts. Add the following code inside class.

  posts = [
    { title: 'Great jobs at arconsis IT-Solutions' },
    { title: 'Join our team at arconsis IT-Solutions' },
    { title: 'At arconsis we work with newest technologies' },
  ];

Now open post-list.component.html and add following code inside it.

<div *ngFor="let post of posts">
  {{post.title}}
</div>

What is this? you may ask yourself. It's a foreach loop inside a .html file. How is this possible? Angular comes with a own template syntax which provides some built-in directives to do such things. Here you can find a good explanation from the official site https://angular.io/guide/template-syntax. Check out the site and you will see a list of post titles! BUT there is a disadvantage with this approach. What if we want to create a list of old posts like an archive? We would have to create a new component with the same logic.

There is better way, let's create a more generic component in the next section Create a generic component.

Feel free to leave your feedback or suggestions here. You can find me at Twitter or simply send me an email to tomislav.eric@arconsis.com.