How to Create & Use Component in Angular 13 App

Share this:

What makes the Angular 13 component so important in the Angular development process.

Well, components are responsible for the majority of the development. Components, in simple terms, are classes that interact with the front end, also known as the.html files.

Now it’s time to look at the file structure listed below.

It’s made up of the following documents:

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

The aforementioned files are automatically generated when you use the Angular CLI command to create a new project. You’ll notice a few imported libraries when you open the app.module.ts file.

You’ll also come across a declarative that reacts to app components in the following way –

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 declarations contain the AppComponent variable, which has already been imported. It has been designated as the primary component.

You can use the Angular CLI command to create components on your own. However, you must keep in mind that App Component will always be the parent component.

The child components you create will be labelled as such.

It’s now time for us to use commands to create a new component.

ng g component new-component

When you run the aforementioned command in the command line, you will get the following output –

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)

You can look at the file structure to see where the new folder is created.

You can find the new component new folder under the src/app folder.

Inspect the new component folder.

The following files will greet you when you open the new component folder –

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

The following changes will be made to the app.module.ts file:

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 you look through the new-component.component.ts file, you’ll notice a new class called NewComponentComponent. This class is in charge of making OnInit work.

Which has a method and constructor and a lifecycle hook named ngOnInit(). Whenever you execute this class, ngOnInit will be called as soon as the 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?

Now we’ll look at how the flow works, since the app component takes on the role of the parent component, as we mentioned earlier.

Components added thereafter become child components.Index.html will be first executed when you visit the URL http://localhost:4200. We have demonstrated it below.

<!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>

The HTML file shown above is the standard HTML file. The contents of the printer will not be visible in the browser. Take a closer look at the tag in the body section.

<app-root></app-root>

The root tag you see there is created by Angular. It was created automatically. The main.ts file contains a reference to it.

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 –

The naming of AppComponent is intriguing. It’s obvious that it’s being used as a variable to hold app references.

Let’s 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 { }

Angular core has been imported. The Component is what we call it, and it’s used in the Decorator as –

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

StyleUrl and templateUrl are given in the declaratory to the selector reference. Selector is simply a tag that we’ve included in the index.html file that we’ve already seen.

A title is a variable in the AppComponent class. The browser uses this variable to display the title.

The templateUrl app.component.html is used by the @Component.

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';
}

It only contains HTML code, as you can see. Curly brackets surround the variable title. The browser gets title’s value from the app.component.ts file and replaces the variable with it. Binding is the term for this process. In the coming tutorials, we’ll see a lot more binding.

A new component named new component has been successfully created. When we try to create a new component from the command line, it finds a place in the app.modules.ts file.

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

It’s time to take a look at 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 necessary in this situation. In the decorator, we used the component reference.

A selector named app new component, as well as the styleUrl and templateUrl, are included in the decorator.

Combine Angular Files Together to Bring Component to Life.

Now is the time to take a look at new-component.component.html

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

We have the p tag, as seen in the HTML code above. The style file is currently empty because no styling is required at this time. However, we will not see the effect of the new component displayed on the browser when we run the project. So let’s add something now – it will be visible in the browser later.

In app.component.html, we need to add a new component (the selector). Please see the code below…

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

The tag will be applied. As a result, everything in the.html file related to the newly created component will finally be visible on the browser. It will also pull information from the data of the parent component.

It’s time to investigate 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>

In the class, we’ve added a variable called new component. “Hello, I’m the new component created by God!” is the value assigned to the variable.

The aforementioned variable can be found in the new-component.component.html file.
Please see the code below.

The selector is currently included in the app.component.html file. This.html is the parent component.html, as you may recall. The actual content of new-component.component.html will be displayed as follows in the browser –

We’ll be able to create more components like this, just as we did in this example. Selectors will be used to link the elements together.

Visit angular.io to learn more about Angular and its features.

Share this:

2 thoughts on “How to Create & Use Component in Angular 13 App

Leave a Reply