Create a below components
ng g c home
ng g c aboutus
ng g c contact
ng g c training
ng g c consultancy
ng g c services
ng g c invalid
Home Component. html
About Component.html
Contact Component.html
Training.html
<ul style="font-size:x-large">
<li>Classroom Training</li>
<li>Online Training</li>
</ul>
Consultancy.html
Services.html
<div style="font-size:x-large;float:left">
<a routerLink="training">Training</a> <br>
<a routerLink="consultancy">Consultancy</a>
</div>
<div style="font-size:x-large;float:left;margin:15px">
<router-outlet></router-outlet>
</div>
Invalid Component.html
App-Module. ts
Now, create a main page Component
ng g c mainpage --flat
.ts Changes
styles: [".c1{background-color:'blue'!important}"]
.html Changes
<h2>https://dotnetbyudayrajakonda.blogspot.com/</h2>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li>
<a routerLink="home" routerLinkActive="active c1">Home</a>
</li>
<li>
<a routerLink="about" routerLinkActive="active c1">About</a>
</li>
<li>
<a routerLink="contact" routerLinkActive="active c1">Contact</a>
</li>
<li>
<a routerLink="services" routerLinkActive="active c1">Services</a>
</li>
</ul>
</nav>
<hr>
<router-outlet></router-outlet>
<h4 class="navbar-fixed-bottom">copyrights© reserved to my blog</h4>
Index.html
set MainpageComponent as bootstrap in appModule.ts
Goto index.html to link bootstrap css cdn links ... <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Now, Run 
Note: ----- Hyperlink click will verify router link path with routes collection, the matching route path related component will be loaded dynamically into router-outlet area of main page for presentation Html5 is providing nav tag to create navigation bar Bootstrap CSS is providing navbar and navbar-inverse css classes to apply shape and background color to navigation bar Bootstrap css is providing nav and navbar-nav css classes to display ul li items as tabs and mouse over will highlight link with bright white colorRouterlinkactive is applying 2 css classes to selected link 1.active-this is provided by bootstrap css to apply shape,backgroundcolor,.. to selected link 2.c1--this is custom css class created by developer,this will apply backgroundcolor blue to selected link,important option will overwrite backgroundcolor of active css class *bootstrap css is providing navbar-fixed-bottom to arrange | display html element at the bottom of webpage[or browser window]
No comments:
Post a Comment
Thank you for visiting my blog