.NET Core 2.0 With Angular 4 and MySQL, Part 7: Angular Components

Creating the server part (.NET Core Web API part) is just a 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.

If you want to see all the basic instructions and complete navigation for this series, check out the following link: Introduction page for this tutorial.

For the previous part check out: Part 6 - Creating .NET Core WebApi project - Handling the POST, PUT, and DELETE requests

The source code is available at GitHub .NET Core, Angular 4 and MySQL. Part 7 - Source Code

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 creation of the Angular project. To install Angular CLI, type the following command at the command prompt:

npm install -g @angular/cli

If you already have Angular CLI installed, verify that you have the latest version. If not, please update it before starting the project. You can find all the instructions in here: https://github.com/angular/angular-cli.

After the installation is complete, we are going to create a new project.

Open the Visual Studio Code and in a terminal window (CTRL+~) navigate to the path you want your project in and execute the command: ng new AccountOwnerClient  

It will take some time to create the project. After the creation process is over, just open the project folder inside your editor. It should look like this:

Third-Party Libraries

We are going to use the bootstrap library for the styling, so install it by typing the following command:

npm install --save bootstrap

It will install the library but we also need to import its path inside the angular-cli.json file. Place it right above the styles.css as on the picture below:

After the bootstrap library installation, we are going to install the type definitions for it. For the installation, type this command:

npm install --save @types/ bootstrap

Right after that, let's import that type definition inside the tsconfig.app.json file.

To install the JQuery library, type this command:

npm install --save jquery

Type definitions are already installed with the bootstrap types. If they are not, just execute:

npm install --save @types/jquery

Imports for the library should look like this:

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

And modify imports for the types like this:

"types": [
  "jquery",
  "bootstrap"
]

For the jQueryUI installation, execute:

npm install --save jqueryui

And for the types execute this:

npm install --save @types/jqueryui

Imports for the library should look like this:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/jqueryui/jquery-ui.min.css",
"styles.css"
  ],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/jqueryui/jquery-ui.min.js"
  ],

Imports for the types should look like this:

"types": [
  "jquery",
  "bootstrap",
  "jqueryui"
]

That wraps up the installation of dependencies.

Now we have all the libraries installed and imported into the right files.

The next step is adding our components to the project.

Angular Components

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

The app.components.ts file looks like this:

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

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

Every component must import Component from the @angular/core package. We will import more things when we need them. Also, you might have noticed 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). Also, 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. In the end, we are creating our class for the component.

Now if we look in the app.module.ts file, we can notice the following:

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 { }

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 a providers array for registering our services.

Creating a New Component

To create a new component with the name Home, first, let's create the folder home inside the app folder. Then inside that home folder, let's create the home.component.ts, home.component.css, and home.component.html files.

We will do the following actions manually just once for the sake of practice, but after that, I am going to show you how to automate the process.

Empty files won't do the trick, so let's add some code to the Home component:

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

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() {
  }

}

In here, we import the OnInit interface which defines the function ngOnInit. This function will execute any logic inside it as soon as the component initializes. Notice the constructor as well. The constructor is intended only for injection of the service into the component. For any action that needs to be executed upon component initialization, use the ngOnInit method.

About App.module

In the end, we are going to include our component into the app.module.ts file:

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

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

Angular CLI provides a better and easier way to instantiate components, all you need to do is to type the command:

ng g component home

Angular CLI will create all of this for you. Also, it will create the fourth file, home.component.spec.ts which you may use for testing purposes.

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

Why?

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

So let's continue.

Additional Content in the Home Component

Modify the home component file as follows:

export class HomeComponent implements OnInit {

  public homeText: string;

  constructor() { }

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

Then, 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;
}

Continue by changing the home.component.html file.

<div class="col-md-12">
    <p class="homeText">{{homeText}}</p>
</div>

Finally modify the app.component.html file, just to test if this works:

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

Now in the terminal type ng serve and wait for the application to compile. Right after that start your browser and navigate to: localhost:4200. You 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 you can run in your browser. But it is just the beginning. We have a long way to go because there are still a lot of important Angular features to introduce into the project.

By reading this post you've learned:

• The way to set up third-party libraries.
• The overview of the Angular components.
• How to create components.
• And some facts about modules in Angular.

Thank you for reading and I hope you found something useful in it.

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

For any suggestions or questions, don't hesitate to leave a comment in the comments section below.