How to Create Class in Angular 6


In this lesson we will create Class in Angular 6. The angular class is mostly created for generating a task and event to the specified element. If you know about OOP(Object Orientated Programming) then the class concept is not difficult to understand. So in this assignment, I will show you how you can create a class in angular and implement that for your different type of purpose.

In this article, we looking out the class implementation and app creation. we will first create an angular app and then after creating a class of contact and implement it. So what we are creating in this article, let’s check out.

Angular 6 Class Creation

In the above image, you will see we are implementing the contact table. In this table, we will insert some data of employees and maintain with the bootstrap table class. You will see ID, Name, Address, Zip Code, and Gender. We are taking the basic information of the employee. The data in this table is completely a demo text don’t compare it with any kind of entity or person.

So let’s get jump into the code, and create a simple table.

Create Angular 6 App

The following command will create the Angular application. Make sure you already install angular/cli in the project. if not then you need to read this article first.

The first command will create an angular app called DClass. You can choose another name for the app also but here we take DClass app. After executing the command it will take some time to create the app and then you will see the DClass folder in your project. In this app, you can find the src and app folder. we are working in the app folder.

Index.html

Find out the index.html file in your project and insert bootstrap CDN into the head tag. Using bootstrap framework we will access table and create a beautiful looking UI.

Create a Class

Now create a class Info. To create a class you can use the terminal of visual code editor or you can execute these command on the cmd also. we will execute this command using the terminal.

Create Class in Angular 6

In the above command, you will see we will first get into the DClass app folder and then create a class. To create a class we are using the ng generate class and the specified class name. So here we will create info class. This command will automatically create a class file in your project.

Implementing Info Class

So now we will implement the Info Class.

Well, Don’t confuse, In the above code we just created a simple private variable of employee data. So we had created an ID, Name, Address, Zip, and Gender variable and pass this in the constructor method parameter. So when the object is created we will pass the values to this variables.

After that, we will create methods to get the values of the variables. It is not necessary to create these methods but it is important to return the variable value through the method so you can access the variable in the app.

app.component.ts

So in this file, we create a class object and specify values to it.

First, we wanted to import the class into the component.ts file. So using import statement we will import the class first and then generate other code.

So in this code, we created a _detail array variable and create the object of Info class. We will use the new keyword to create an object and specify parameter values. Make sure you specify the correct data types to the object otherwise it will return an error message.

Here we take five values and create new object instance every time.

app.component.html

Now the time is to create a design for your app. So we will create a table and rows to show this data. we are using the bootstrap table dark class to color the table.

Just import this code in the app.component.ts file. In the above code we created a table and in the table data, we specify the ID, name, address, zip, and gender properties. To access this property we created a *ngFor template.

We had added the bootstrap class table dark to create a dark table and also add some bootstrap classes to change the UI of the render element.

Using *ngFor we will access the array values and render this in the table data. If you really want to know about what is the *ngFor then read this article. After rendering the values in the HTML file you will see the result.

Serve angular app

Now our application is ready and ready to execute. So angular provide us a command that executes the angular application.

So the ng serve –open command will execute the application.

That’s it.

Now you are able to create a class in Angular 6. You can create or execute different type of tasks using the class. So that is all for now.

If you have any question then comment me and share this article.

We will see you in the next article.

Thank You.

Leave a Reply

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