Among other advantages, Angular gained incredible momentum within last year thanks to reactive and composable components. Components are reusable Angular instances with a name. We can use this component as a custom element inside a root.

In this lesson, we will learn how to create, use and organize components.

1. Create and export component

1. Create a new folder and call it components inside the src folder:

2. Create a new folder and call it hello-world inside the components folder:

3. Create a new file called hello-world.component.html inside hello-world/ folder:

4. Open hello-world.component.html file and add the following code:
• hello-world.component.html

 <h1>Hello Angular World</h1>
  

5. Create a new file called hello-world.component.ts inside hello-world/ folder.
6. Add following code to the hello-world.component.ts file:
• hello-world.component.ts

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

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.component.html',
})
export class HelloWorld {
}
  

As you already know from a previous lesson, within the metadata (@Component{...} we have defined a component selector and below, we have exported a HelloWorld component.

Important:
Instead of providing the path to the external file with HTML template like w just did:

templateUrl: './hello-world.component.html'

we could use template: atribute (instead of templateUrl:) and write and HTML code directly inside the .component.ts file like below:

template: '<h1> Hello World </h1>'


It is important for you to remember that component.ts file is the only file required to create a component. However, when you create more complex components it's highly recommended to use separate files for template, styles and tests.

Now when our component is already exported we are ready to import it withiin the App component.

2. Import component into module

In order to import component within our App component we have to:

1. Import new component within the app.module.ts file:
1. Add following import line:
• app.module.ts

import { HelloWorld } from './components/hello-world/hello-world.component'  	
		  

2. Add HelloWorld into declarations[] array.


3. Use component

Now we are ready to use our component. Open app.component.html and paste <hello-world></hello-world>.



Save the file and run the project.



Now you know how to create, export and import components. Before we start building real application I want to show you one more important thing.

4. Import component into another component

In our previous example our HelloWorld component contained only a HTML markup, without any logic. Let's add some logic to our HelloWorld component.

1. Update hello-world.component.ts and hello-world.component.html with following code:

Note:
Below code markup contains 2 tabs (component.html and component.ts). You can switch between them. In some components you find different tabs i.e. including styles for given component.

• hello-world.component.html
• hello-world.component.ts

<h1>Hello World Component</h1>
<p>Hello World counter = {{counter}}</p>
<p><button (click)="increaseCounter()" >Increase Hello World counter</button></p>
      

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

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.component.html',
})
export class HelloWorld {
  counter = 0;
 
  private increaseCounter(this) { 
    this.counter++;
  }

  public getCounter(){
    return this.counter;
  }
}

      

2. Update app.component.ts and app.component.html with following code:
• app.component.html
• app.component.ts

<hello-world></hello-world>

<hr>
<h1>This is AppComponent</h1>
<p>App component counter = {{counter}}</p>
<p><button (click)="increaseCounter()" >Increase App Component counter</button></p>
<button (click)="getHelloWorldCounterValue()">Get Hello World Counter </button>


      

import { Component, OnInit, ViewChild } from '@angular/core';
import { HelloWorld } from './components/hello-world/hello-world.component'

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

export class AppComponent implements OnInit {
  @ViewChild(HelloWorld ) child: HelloWorld ; 

  ngOnInit() { 
  } 
  counter = 0;
 
  private increaseCounter(this) { 
    this.counter++;
  }
  private getHelloWorldCounterValue(){
 this.counter = this.child.getCounter();
}
}

      

We have created two counters, one within each component. Each component has also a button which increase counter by one. Each counter works impedently - doesn't affect the other counter. Let's check it:

3. Run the app.


What is important, is that our HelloWorld component has a logic now. Except for increaseCounter() function which allows us to increase the counter, it has also another function called getCounter(). This functions returns the current value of the HelloWorld counter.

Now when our HelloWorld component has not only template but also a logic, it's not sufficient to import it only in app.module.ts file. In order to use it's function within App we have to import it within the app.component.ts file as it shown below:



We used some new functions here like @ViewChild, ngOnInit() and others. We will learn about them in next lessons. For now I want you to rember one thing:

Remember:
Whenever you want to use component without logic it's sufficient to import it into your module file (step 2).

If you want to use functions exposed in other component you have to also import it within the component.ts file (step 4).

Thanks to that, when we press the second button (Get Hello World Counter) we can call getCounter from App component, and align App counter with HelloWorld counter value.



Now when we know how to create, export and import components it's a high time to build some real application!