Create, export & import components

Author: Dawid Adach

-

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 components folder
  3. Create a new folder and call it hello-world inside the components folder:
  4. Create hello-world folder
  5. Create a new file called hello-world.component.html inside hello-world/ folder:
  6. Create hello-world.component.html file
  7. Open hello-world.component.html file and add the following code:
  8. 
     <h1>Hello Angular World</h1>
      
  9. Create a new file called hello-world.component.ts inside hello-world/ folder.
  10. Add following code to the hello-world.component.ts file:
  11. 
    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:
      2. 
        import { HelloWorld } from './components/hello-world/hello-world.component'  	
        		  
      3. Add HelloWorld into declarations[] array.
      Import into AppModule

    3. Use component

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

    Use component in template file

    Save the file and run the project.

    Use component in template file

    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:
    2. 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.

      
      <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;
        }
      }
      
            
    3. Update app.component.ts and app.component.html with following code:
    4. 
      <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:

    5. Run the app.
    6. Counters

      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:

      Import component

      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.

      Counters

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


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits