Scribd
Upload
68 views

Creating Components in Angular

Components in Angular and ASP.NET Core represent self-contained HTML and TypeScript code that perform specific operations. Components have an HTML file that defines the UI and a TypeScript file that contains the logic and properties. Components can be used by referencing their selector in other HTML files or by defining routes. The Angular CLI makes it easy to generate new components with all the necessary files. Developers can then add functionality by binding to properties and iterating over data in the template.

Uploaded by

catherine harris
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
68 views

Creating Components in Angular

Components in Angular and ASP.NET Core represent self-contained HTML and TypeScript code that perform specific operations. Components have an HTML file that defines the UI and a TypeScript file that contains the logic and properties. Components can be used by referencing their selector in other HTML files or by defining routes. The Angular CLI makes it easy to generate new components with all the necessary files. Developers can then add functionality by binding to properties and iterating over data in the template.

Uploaded by

catherine harris
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Creating Components in Angular and

ASP.NET Core

What is the component?


Components represent self-contained HTML code and Typescript code
that perform certain operations. If you work with these forms, the
HTML represents your ASP ex file. As given below.

And the typescript represents your code-behind.

In the HTML you define the HTML element the operations you want to
perform and in the Typescript, you have the operations, properties and
so on. If we take a look at the counter component example we have
HTML here and also we have this variable current count and we have
Typescript file that does some operations and has the properties.
Now to use a component you have two options either take its selector
and use it as an HTML element where ever you find suitable or define
routing for it inside the router module.

If you take to look into the nav-menu component and notice its selector.
If we go to the app-component HTML which is the main entrance for
our obligations. You can see we have nav-menu used as an HTML tag,
and now we can use it to throw out the obligation where ever we want.

If we take a look at the HTML we notice inside our component like an


HTML element, and then it will contain our HTML code so now if we
look at the nav-menu component we can notice that this is the same
selector for it as the selector we have defined and inside it, we have
HTML elements that we have defined.
So it’s like custom HTML elements available for us and when we
reference it inside our HTML client app it will be evaluated, rendered
and also we will be able to interact with it.

Creating a Component.
To create a new component we have two options we can simply copy
this to create a new component.

Or you could use the help of the Angular CLI now I am going to open a
new command line and then I am going to call angular CLI you can in
the image below how to do.
When we say skip import It means we don’t want to place the
component inside the module file we don’t put this command inside the
app folder we will put it inside the client app folder and you will notice
that it generate a new component and we can see it comes with four files
the CSS file, HTML, spec and Typescript as given below.

Now let’s come to the HTML and create a new to-do list. This is a
simple to-do list component. As you can see in the picture below that I
have add buttons for my list Now I want to iterate through the to-do
items that I have created I'm going to create just the table and I'm going
to create a new table that says that this is my to-do item.
I'm going to create a new table raw and that table raw will iterate
through to-do items. I have my application right here. I have this input
that I have. I have this button that has also this event to be clicked and
we're going to iterate through them.

Let's go into Typescript and declare it a new to-do area which we will
iterate through and this shall be of type array of string we're going to add
to-do pops. And as you can see it's quite simple and it's not that likely
does not take too much effort. So we have defined the property we have
defined the area. So now we have done everything that we need to do.
We need to add this reference to the app module we need to add it to the
declaration.

Otherwise, it will not be available.

Let’s run this and now you'll notice that we can see the new component
and as well as the elements inside it. So as you can see this is how we
can create a component we need.

We have the component we need to reference it to the module and then


we can just take its selector and put it whatever wherever we find
suitable and display it to our users.

I hope this article helps you keep learning and sharing. Thanks.

You might also like