Angular Components and Project Preparation

Angular project preparation can vary from project to project and from version to version, and this article is dedicated to that topic.

Creating the server part (.NET Core Web API part) is just half of the job we want to accomplish. From this point onwards, we are going to dive into the client side of the application to consume the Web API part and show the results to the user by using angular components and many other features.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

So, let’s start.

Installation of the Angular CLI and Starting a New Project

First, we are going to install the Angular CLI (Angular Command Line Interface) which will help us a lot with the Angular project preparation and Angular project development overall.

To install Angular CLI, we need to open the command prompt (the best option is to open it as administrator) and use the install command:

npm install -g @angular/cli

If you already have the Angular CLI installed, you can check if you have the latest version:

ng --version

If you don’t have the latest version (13 for this article), you can uninstall it:

npm uninstall -g @angular/cli
npm cache clean --force

And after that, we can use the install command (mentioned above) to reinstall it.

After the installation completes, we are going to create a new project in the same command window:

ng new AccountOwnerClient --strict false

Two questions will appear. The first one is whether we want our project to have routing created, and the second one is about what kind of styling we want in our project. We are going to answer Yes (Y) for the first question, and (CSS – just hit enter) for the second one.

It will take some time to create the project.

After the creation process is over, we are going to open the project folder inside our editor. We will use Visual Studio Code.

Third-Party Libraries as Part Of Angular Project Preparation

We are going to use the ngx-bootstrap library (angular bootstrap) for styling, so let’s install it using the terminal window in the VS Code:

ng add ngx-bootstrap

After we start the installation, it will inform us that we are about to install the [email protected] (in our case) package and whether we like to proceed. We are going to confirm that and finish the installation.

With this installation, we are installing both bootstrap and ngx-bootstrap, and also our package.json, angular.json, and app.module files will be updated:

 ✅️ Added "bootstrap
 ✅️ Added "ngx-bootstrap
UPDATE package.json (1140 bytes)
UPDATE angular.json (3160 bytes)
UPDATE src/app/app.module.ts (502 bytes)

At this point, we can try to run our app:

ng serve -o

With this command, we are going to run our app and also open it in a browser automatically (-0 flag).

If you get an error now (this is possible to happen due to a new ngx-bootstrap version), all you have to do is to open the angular.json file and modify the styles array:

"styles": [
  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

We have to modify the ngx-bootstrap path since it is wrong by default.

After this modification, we can run our app, and after a few seconds, we are going to see the initial page:

The next step is adding our components to the project.

Creating Angular Components

Let’s take some time to talk a bit about Angular. Angular is a framework for building SPA (Single Page Application) applications. Therefore, we are going to generate all of our pages inside one page. That is why we only have the index.html page inside the src folder. In the index.html file all content is going to be generated inside <app-root></app-root> selector, which comes from the app.component.ts file.

That said, let’s take a look inside the src/app/app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AccountOwnerClient';
}

Every component must import Component from the @angular/core package. We will import more things when we need them. Also, we can notice the @Component decorator inside the code.

This is the place where we create our selector (it is the same as the app-root tag in the index.html file). Additionally, we are binding the HTML template for this component with the templateUrl and the CSS files with this component by using styleUrls. StyleUrls is an array of strings, comma-separated.

Lastly, we have the exported class for the component.

Now let’s take a look in the app.module.ts file, which is quite important for the Angular project preparation and for development at all :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this file, we are going to import the necessary modules, components, and services. We are going to use the declarations array to import our components, and the imports array to import our modules. Also, we are going to use the providers array for registering our services.

Creating a New Angular Component

To create a new component named Home, let’s execute the required command:

ng g component home --skip-tests

With this command, we create the Home component with three files (.ts, .html, .css), and update the app.module file:

CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.ts (267 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (576 bytes)

Also, by adding the --skip-tests flag, we prevent creating the test file.

After the creation, we can inspect the Home component:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Here we import OnInit interface which defines the ngOnInit function. This function will execute any logic inside it as soon as the component initializes.

We can notice the constructor as well. The constructor is intended only for the injection of the service into the component. For any action that needs to be executed upon component initialization, we should use the ngOnInit function.

About App.Module

If we check the app.module.ts file, we will see that our new component is imported with our previous command:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So, as we can see, Angular CLI creates all of this for us.

Even though one module is enough for the entire application, we still want to create more modules.

Why?

Because it is easier to maintain the modules and also more modules give us the advantage of the lazy content loading. That means that our application will load only content related to that specific module we are pointing to, and not the entire application.

That said, let’s continue.

Additional Content in the Home Component

Let’s modify the home.component.ts file:

export class HomeComponent implements OnInit {

  public homeText: string;

  constructor() { }

  ngOnInit(): void {
    this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION";
  }
}

Then, let’s add a new class to the home.component.css file:

.homeText{ 
    font-size: 35px; 
    color: red; 
    text-align: center; 
    position: relative; 
    top:30px; 
    text-shadow: 2px 2px 2px gray; 
}

To continue, we are going to change the home.component.html file:

<p class="homeText">{{homeText}}</p>

Finally, let’s modify the app.component.html file, by removing all the content and adding a new one, just to test if this works:

<div class="container">
  <div class="row">
      <div class="col">
        <app-home></app-home>
      </div>
  </div>
</div>

Now in the terminal, let’s type again ng serve -o and wait for the application to compile and run. We should see the welcome message on the screen from the Home component.

Conclusion

Right now we have a working component and an Angular application that we can run in our browser. But it is just the beginning. We have a long way ahead of us because there are still a lot of important Angular features to introduce to the project.

In the next part of the series, we are going to show you how to create navigation in the project and also how to use routing.