Angular 14 Tutorial- How To Create And Use The Component In Angular 14 App

What makes the Angular component so significant in the development process with Angular?

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

Most of us know that a significant part of development relies on components. In simpler terms, components are nothing but those classes that interact with the front end i.e the .html files.

 

Now, let us take a look at the file structure below. It is made of the following files:

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

 

When we create a new project with the help of the Angular CLI command, the aforementioned files are automatically generated. When we open up the app.module.ts file, we will come across a few imported libraries.

 

We can also come across a declarative which responds to the app component as followed:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

The AppComponent variable belongs to the declarations and it has already been imported. It is assigned as the parent component.

If you want to create components on your own, then you can use the Angular CLI command. But you must remember that the App Component will remain as the parent component.

The components you create will be identified as child components.

 

Now, it’s time for us to create the new component with the help of commands:

ng g component new-component

We will get the following output when we run the aforementioned command in the command line:

ng g component new-component
# CREATE src/app/new-component/new-component.component.css (0 bytes)
# CREATE src/app/new-component/new-component.component.html (32 bytes)
# CREATE src/app/new-component/new-component.component.spec.ts (671 bytes)
# CREATE src/app/new-component/new-component.component.ts (296 bytes)
# UPDATE src/app/app.module.ts (422 bytes)

 

If you wish to know where the new folder is created, then you can check the file structure.

As for the new component new folder, you may check under the src/app folder.

 

Inspect The New Component Folder

When we inspect the new component folder, then we will be greeted by the following files:

  • new-component.component.css – The required CSS file is created for the new component.
  • new-component.component.html – The HTML file has been created.
  • new-component.component.spec.ts – We shall be using this for unit testing.
  • new-component.component.ts – We will be able to define the properties, module, etc. with the help of this.
  • The new-component.component.ts file will be created as followed:

The app.module.ts file changes will be added as followed:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Automatically imported component by Angular CLI
import { NewComponentComponent } from './new-component/new-component.component';
@NgModule({
  declarations: [
    AppComponent,
    NewComponentComponent // Component declared by Angular CLI
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

When we inspect the new-component.component.ts file, we will come across a new class named NewComponentComponent. This class is responsible for implementing OnInit.

Which has a method and constructor and a lifecycle hook named ngOnInit(). Whenever NewComponentComponent class is ready.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-new-component',                   
  templateUrl: './new-component.component.html',  // Manages Component's HTML
  styleUrls: ['./new-component.component.scss']    // Handles Component's styling
})
export class NewComponentComponent implements OnInit {
  constructor() { }   // Used to inject dependencies
  ngOnInit() {  // Lifecycle hook, initialize when component class is ready
  }
}

 

How The Angular App Flow Functions?

Here, we will see how the flow functions, as we have stated before, the app component assumes the role of the parent component.

Components added thereafter become child components.Index.html will be first executed when we visit the URL http://localhost:4200. Below given is the demonstration of the same:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTest</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

 

Above given is a regular HTML file. Things printed there will not be visible on the browser. We will take a closer look at the body section and the tag there:

<app-root></app-root>

 

Angular is responsible for he root tag we see there. It was created by default. We will find reference to it in the main.ts file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

 

Where Does AppModule Come From?

We have imported it from the main parent module app. And it is passed onto the bootstrap module as well. It’s time for us to check out the app.module.ts file.

It is interesting to the naming of AppComponent. It is pretty clear that it is used as a variable to contain app references.

We will now check out the app.components.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewComponentComponent } from './new-component/new-component.component';
@NgModule({
  declarations: [
    AppComponent,
    NewComponentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have imported Angular core. We are referring it as the Component and it is used in the Decorator as:

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

In the reference of declaratory the selector, styleUrl and templateUrl are given. As for selector, it is just a tag which we have included in the index.html file that we have seen above.

A title is a variable of the class AppComponent. This variable is accessed by the browser to show the title.

The @Component utilizes the templateUrl named app.component.html.

Refer the code below:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

As we can see, it only has HTML code in it. The variable title is appended in curly brackets. The browser accesses the value of title from the app.component.ts file and replaces the variable with the value. This process is referred to as binding. We are going to see more of binding in the upcoming tutorials.

We have successfully created a new component named new component. And it finds a place in the app.module.ts file when we try to create a new component from theĀ  command line.

We will find a reference to the newly created component in the app.module.ts.

Afterward, we will check out the newly created file in the new component.

new-component.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-new-component',
  templateUrl: './new-component.component.html',
  styleUrls: ['./new-component.component.css']
})
export class NewComponentComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Importing the core has become a necessity here. We have used the component reference in the decorator.

The decorator is equipped with a selector named app new component and the styleUrl and templateUrl.

 

Combine Angular Files Together To Bring Component To Life

Time has come for us to check out the new-component.component.html below:

<p>
  new-component works!
</p>

As it is evident in the HTML code above, we have the p tag. At present, the style file is empty given, we don’t need any styling at this point. But when we run the project, we will not come across the effect of the new component displayed on the browser. So, let’s add something at this point-it will be visible later on the browser.

We need to add app new component (the selector) in the app.component.html. Refer the code below:

<app-new-component></app-new-component>

We will be adding the tag. As a result, everything which is present in the .html file will be finally visible on the browser related to the newly created component. It will also fetch things from from the parent component data.

Now, we will check out the new-component.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <p>
    new-component works!
  </p>
</div>

 

We have added a variable named new component in the class. The value assigned to the variable in “Hello, I’m the new component created by God!“.

We will find the aforementioned variable in the new-component.component.html file.

refer the code below:

At present, we have included the selector in the app.component.html. if we remember, this .html is the parent component .html. The actual content of the new-component.component.html will be displayed on the browser as below:

Angular Component Demo

Just as explained in this tutorial, we will be able to create more components like this, and the linking will be achieved with the help of selectors.

 

Conclusion

In this Angular tutorial, we have seen how to create and use component in Angular 14 app.

 

Thanks

Leave a Reply

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