how to make component binding in angular 8,9,10

 how to make component binding in angular

Introduction to angular:

     hello dear learner and visitor thanks for choosing us .Angular is the JavaScript open source SPA(Single Page Application) framework .we can create our application using its MVVC architecture with advanced feature ,easy way of implementation and configuration. In angular to make any web application oor hybrid is very easy because the structure of of project is so easy to understand for any web developer.we can also make hybrid and native application with the help of other framework with angular.

Template rendering in angular

As angular is a SPA framework and for it's awesome features and reusable capability we can write bunch of codes once and can use them in multiple places .I like this feature of angular very much and this is very is implement in angular. So in this article our main goal is to give you enough knowledge about the component or template or view rendering in angular .

most of cases developers face issues for this type of problem of template rendering mostly for beginners and they always want to get some good source where they can got know something .

So sometime we want to write the HTML content once and want to use to everywhere where without writing the code again and again. For this type of issue we have to do the template rendering and fir that we have to know some rules to do that in angular.

It's very simple to implement this before implementing just take an example why we need this.Sometime our task is to add a view which will be common for each page like Navbars,Topbars,headers,footers etc.And for all this section we may need to write the code for each template so that we can that section on all pages because this sections are common on all pages.Sp for this we need to implement the page like in that way that should reflect on each page without writing the same code again and again.

Let's understand this topic with an example.

First of all generate a new angular app with default folder structure with this command.

ng new ExampleApp

First of all we have to generate some components so that we can to the rendering of templates As we have discussed above we are going to to create these components

    

ng g c component/topbar

ng g c component/header

ng g c component/footer

run the command one by one this will generate component that we need for our example .After generating these component just navigate to the component folder you can see all the components there 

See the project structure after firing these commands 

Now we are going add codes for each section 

First we are going to check inside the app.component.html is everything according to out requirement or not .

delete unnecessary HTML contents except 

<router-outlet></router-outlet>

this is important to render components .Let's run the application and the result with this command .

ng serve 

Now we don't have any content so our UI will be like this 

Now we need to another component Home component .We need this component to bind all common components here so that after any page we will move from this page we can keep all these common sections here and then all other page will change dynamically . 

ng g c homecomponent

First of all we have to add the home component selector inside app.component.html

Inside navbar componet html file add this much 

<nav class="navbar navbar-default">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Page 1</a></li>

        <li><a href="#">Page 2</a></li>

        <li><a href="#">Page 3</a></li>

      </ul>

    </div>

  </nav>

Now we will add this component selector inside home component html 

like this 

 This will point to the navbar and now we will add home componet selector inside app.component.hml file.After adding all this we can now refresh the page on browser and then you can you navbar with some tabs .

Let's add some HTML contents for footer component 

<footer>

    <p>TechniKnowledge4k<br>

    <a href="mailto:hege@example.com">exampleapp@example.com</a></p>

  </footer>

This will add a sample footer inside our example app homepage .now if you you will add any pages then all pages will common and we can navigate one page to another and we can see these UI on all pages .This will minimize our code size or our project size and this will also speed up our application.This is the whole process with which we can implement template rendering .This is small example of template rendering in large application we may face other issues so we have to implement accordingly .

Let's create two component 

ng g c productlispage

ng g c productdescriptionpage 

You can add contents  to these pages accordingly to your requirement.Then create route for all this components inside app-routing.module.ts file .Like this 

const route =[

{

path:"productlist",component,productlistcomponet,

path:"productdescripttion",component,productdescriptoncomponet,

}

]

If you want Example project then plz comment or send us a request on contact us form we will share the content free .

thanks for visiting our site we are waiting for your feedback.