Angular: Load Dynamic Div HTML Content
In this article, we’ll learn how we can load dynamic html content in page using Angular 8.
Prerequisites:
- Prior knowledge of TypeScript.
- Prior knowledge of JavaScript.
- Visual studio code.
- A development machine with Node 8.9+ & NPM 5.5.1+ installed.
Step 1: Installing Angular CLI 8
First step, where we’ll have to install latest version of Angular CLI
$ npm install -g @angular/cliStep 2: Creating your Angular 8 Project
In this second step, we will use Angular CLI to start our Angular Project
Go to CMD or Terminal and use this command:
$ ng new custom-loaderThis CLI will ask you “whether you would like to add Angular routing” Say Yes.
It will ask “which stylesheet format you would like to use”. Choose CSS.
Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.
After that open your project in Visual studio code and go to your root folder and run the local development server using below command:
$ npm start
Now run localhost:4200/ in your browser
Step 3: Add Template Component.ts
- Use this command
$ ng g c template- Add code of your on project.
Step 4: Add this interface ts file.
Step 5: How to use this in HTML component
Open app.component.html page and add this selector
<app-template></app-template> 
Step 6: Add this CSS code in app.component.css.
p {
font-family: Lato
}
#contentInside {
margin: 7px;
display: inline-flex
}
.text-box {
border: 1px solid #ccc;
background-image: none;
display: block;
width: 25%;
border: 1px solid #ccc;
border-radius: 4px;
height: 25px;
padding: 6px 12px;
font-size: 14px;
border-radius: 4px
}
.check-mark {
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee
}
.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0
}
.dropdown-color {
border-radius: 4px
}
button {
background: #0062cc;
border: inherit;
color: #fff;
margin-left: 10px;
border-radius: 3px;
padding: 9px 20px;
margin-top: 10px
}Practical Demo of Loading Dynamic HTML Div Content in Angular
Over To You!
Looking for a Sample Source Code? Here you go: Dynamic Div Add With Form Element – GITHUB.
If you have queries about Dynamic HTML Content Load in Angular tutorial, please ask our Angular Developers via GitHub Profile.
That’s it for now. Stay Connected for more tutorials, until then Happy Coding…
Related Helpful Resources:
I am .NET developer and part of the amazing team here at Samarpan Infotech. I am always ready to learn new technologies. "Learning is the best thing in the world, no matter what are you doing, in the end, you are a learner."
