Post
Ask Question

Creating Components And Applying Template In Angular .NET Core

Introduction

 
In this article, we will learn to make a component and apply a template in Angular 10.
 

What is a Component?

 
In Angular, a component encapsulates the data, Html Template, and the logic for the view. In real world applications, we can say components are like navbar, sidebar, header, footer components, etc.
 
Or we can take it as the ViewComponents of .Net Core MVC.
 
We can add several components on one view or the different view where we want to use it. While applying the template, we divide the template into several components and add them to the layout view (index.html).
 
Here, I am going to apply the AdminLTE Layout for the admin panel. you can download the AdminLTE Template from this site,
 
https://adminlte.io/themes/dev/AdminLTE/index.html
 
So let's start working on it.
 
Step 1
 
Before starting,  please make sure you have set up your Angular project and installed all the dependencies. If you haven't,  then please follow  this article here.
 
Step 2
 
Create an Angular-10 project in .net core MVC, run ng-build command, and generate node_modules folder. For applying the layout, we'll download the admin template from the adminlte.io website. And copy its CSS, js folder, and paste it into the assets folder. Make sure you paste all assets like CSS, js, images, and fonts folder into the src/assets folder. Because this assets folder path has registered in the angular.json file so, Angular quickly identifies these paths.
 
Creating Components And Applying Template In Angular .NET Core
 
Make sure that in angular.json file assets folder path is registered with options tag:
  1. "assets": ["src/assets"],   
In Angular, the main root file is the index.html file in the src folder. In this file, we found the HTML, head, body, tags. And the extra one is app-root, which represents the root of the HTML document. We can place our CSS and js files links into this document. But it's not a good practice for a developer. So, we always keep our CSS and js file link from the view page and registered all that files into the angular.json file into Styles and Scripts tags. like this.
 
In ClientApp/angular.json file,
  1. "styles": [  
  2.              "node_modules/bootstrap/dist/css/bootstrap.min.css",  
  3.              "src/styles.css",  
  4.              "src/assets/Content/all.min.css",  
  5.              "src/assets/Content/adminlte.min.css"  
  6.            ],  
  7.            "scripts": [  
  8.              "node_modules/jquery/dist/jquery.min.js",  
  9.              "src/assets/js/bootstrap.bundle.min.js",  
  10.              "src/assets/js/adminlte.js"  
  11.            ]  
 
Creating Components And Applying Template In Angular .NET Core
 
app.component.html file,
 
This file is found in the clientapp/src/app/app.component.html path. It's generally in the body of the document so we can apply the template body classes from here. And that section which we want to render during the development of the website, will be registered here.
 
We saw RenderBody() section in .net MVC & Core, and Angular provides the <router-outlet></router-outlet> tag for rendering dynamic contents in a block.
 
index.html
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8" />  
  5.   <title>Angular Demo Web Application</title>  
  6.   <base href="/" />  
  7.   
  8.   <meta name="viewport" content="width=device-width, initial-scale=1" />  
  9.   <!-- IonIcons -->  
  10.   <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">  
  11.   <!-- Google Font: Source Sans Pro -->  
  12.   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">  
  13. </head>  
  14.   <body>  
  15.     <app-root>Loading...</app-root>  
  16.   </body>  
  17. </html>  
 app.component.html
  1. <body class="hold-transition sidebar-mini">  
  2.   <div class="wrapper">  
  3.     <app-header></app-header>  
  4.     <app-sidebar></app-sidebar>  
  5.     <div class="content-wrapper">  
  6.       <router-outlet></router-outlet>  
  7.     </div>  
  8.     <app-footer></app-footer>  
  9.   </div>  
  10. </body>  
Okay, here I am dividing my layout view into separate components for neat and clean viewing, and it's a good practice also. So here, I am creating three separate components for header, footer, & sidebar. Now let's generate components from the command.
  1. ng g c new-component --module app  
Usually, we will generate components from ng g c new-component command, but here we have to specify the exact path so, we add the module tag, which is the "app" module. Or if you are in the other directory then use this command:
  1. ng g c component-name --module ../  
Creating Components And Applying Template In Angular .NET Core
 
Now I've registered all these generated components in clientapp/src/app-module.ts.
 
Creating Components And Applying Template In Angular .NET Core
 
header.component.html 
  1.  <!-- Navbar -->  
  2. <nav class="main-header navbar navbar-expand navbar-dark navbar-primary">  
  3.   <!-- Left navbar links -->  
  4.   <ul class="navbar-nav">  
  5.     <li class="nav-item">  
  6.       <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>  
  7.     </li>  
  8.     <li class="nav-item d-none d-sm-inline-block">  
  9.       <a href="index3.html" class="nav-link">Home</a>  
  10.     </li>  
  11.   
  12.   </ul>  
  13.   <!-- SEARCH FORM -->  
  14.   <form class="form-inline ml-3">  
  15.     <div class="input-group input-group-sm">  
  16.       <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">  
  17.       <div class="input-group-append">  
  18.         <button class="btn btn-navbar" type="submit">  
  19.           <i class="fas fa-search"></i>  
  20.         </button>  
  21.       </div>  
  22.     </div>  
  23.   </form>  
  24.   <!-- Right navbar links -->  
  25.   
  26. </nav>  
  27. <!-- /.navbar -->  
 footer.component.html
  1. <!-- Main Footer -->  
  2. <footer class="main-footer">  
  3.   <strong>Copyright © @DateTime.Now <a href="#">AdminLTE.io</a></strong>  
  4.   All rights reserved.  
  5.   <div class="float-right d-none d-sm-inline-block">  
  6.     <b>Version</b>  
  7.   </div>  
  8. </footer>  
 sidebar.component.html
  1. <!-- Main Sidebar Container -->  
  2. <aside class="main-sidebar sidebar-dark-primary elevation-4">  
  3.   <!-- Brand Logo -->  
  4.   <a href="#" class="brand-link navbar-primary">  
  5.       
  6.     <img src="assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"  
  7.          style="opacity: .8">  
  8.     <span class="brand-text font-weight-light">Admin</span>  
  9.   </a>  
  10.   <!-- Sidebar -->  
  11.   <div class="sidebar">  
  12.     <!-- Sidebar user panel (optional) -->  
  13.     <div class="user-panel mt-3 pb-3 mb-3 d-flex">  
  14.       <div class="image">  
  15.   
  16.         <img src="assets/img/nouser.png" class="img-circle elevation-2" alt="User Image">  
  17.       </div>  
  18.       <div class="info">  
  19.         <a href="#" class="d-block">Khushbu Saini</a>  
  20.       </div>  
  21.     </div>  
  22.     <!-- Sidebar Menu -->  
  23.     <nav class="mt-2">  
  24.       <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">  
  25.         <!-- Add icons to the links using the .nav-icon class  
  26.         with font-awesome or any other icon font library -->  
  27.   
  28.         <li class="nav-item">  
  29.           <a href="#" class="nav-link active">  
  30.             <i class="nav-icon fas fa-tachometer-alt"></i>  
  31.             <p>  
  32.               Dashboard  
  33.             </p>  
  34.           </a>  
  35.         </li>  
  36.   
  37.       </ul>  
  38.     </nav>  
  39.     <!-- /.sidebar-menu -->  
  40.   </div>  
  41.   <!-- /.sidebar -->  
  42. </aside>  
Output
 
Build and run the project by ng-serve command .
 
Creating Components And Applying Template In Angular .NET Core
 
Now we can see our admin layout look likes this.
 
Creating Components And Applying Template In Angular .NET Core
 

Summary

 
In the above article, we saw how to apply a custom admin layout with our CSS and js. We learned to create components and add them with templates layout view, and how to add custom CSS and js files.


Similar Articles