Navigation in Angular is done by Routing
Please follow these steps in command prompt:
1. ng new router-example Select y for Routing and CSS for stylesheet.
2. cd router example
3. ng g c student
4. ng g c subject
5. code . (or) Open the folder router-example manually
6. In VS code editor, open the app.module.ts file.
7.
import { RouterModule } from '@angular/router';
Locate @NgModule() section replace imports array with the following and save:
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'student', component: StudentComponent},
{path: 'subject', component: SubjectComponent},
]),
],
8. Open file app.component.html. add and save
Delete the old contents. add and save:
<app-student></app-student>
<app-subject></app-subject>
open New Terminal Window and type
ng serve
open in browser http://localhost:4200
:to check the app is working .
9. Open file app.component.html. add the following and save
<nav>
<a class="button" routerLink="/student">Student List</a> |
<a class="button" routerLink="/subject">Subject List</a>
</nav>
<router-outlet> </router-outlet>
Check the Browser output to see as navbuttons.
10. open the app.component.css. Add the following and save:
.button {
box-shadow: inset 0 1px 0 0 #ffffff;
background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
outline: 0;
}
.activebutton {
box-shadow: inset 0 1px 0 0 #dcecfb;
background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
border: 1px solid #84bbf3;
color: #ffffff;
text-shadow: 0 1px 0 #528ecc;
}
10. Now Check in Browser window similar to the window as shown.
-------------------------------------------------------------------------------------------------
11. Adding some data in component to display while we navigate:
Open subject.component.ts file and add/modify as follows the class SubjectComponent
subjects = [
{ id: 12, name: 'Networks' },
{ id: 13, name: 'C' },
{ id: 14, name: 'C++' },
{ id: 15, name: 'Angular' },
{ id: 16, name: 'React' },
{ id: 17, name: 'Java' },
{ id: 18, name: 'Python' },
{ id: 19, name: 'HTML' },
{ id: 20, name: 'CSS' }
];
12. Add the following contents to student.component.html file:
<div *ngFor="let s of subjects">
<div style="color: #0000ff">
{{s.id}}: {{s.name}}:
</div>
</div>
13. Open subject.component.ts file and add/modify as follows the class SubjectComponent and save
students = [
{ id: 102, name: 'Dr. Nice' },
{ id: 103, name: 'Bombasto' },
{ id: 104, name: 'Celeritas' },
{ id: 105, name: 'Magneta' },
{ id: 106, name: 'RubberMan' },
{ id: 107, name: 'Dynama' },
{ id: 108, name: 'Dr. IQ' },
{ id: 109, name: 'Magma' },
{ id: 200, name: 'Tornado' }
];
12. Add the following contents to subject.component.html file and save:
<div *ngFor="let s of students">
<div style="color: #0000ff">
{{s.id}}: {{s.name}}:
</div>
</div>
13. Check these output in browser window by typing ng server in terminal http://localhost:4200 in browser
Happy Learning Angular !!!💁💁
Exercise
1. Modify file app.component.css with the following contents
.button {
box-shadow: inset 0 1px 0 0 #ffffff;
background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
outline: 0;
}
.activebutton {
box-shadow: inset 0 1px 0 0 #dcecfb;
background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
border: 1px solid #84bbf3;
color: #ffffff;
text-shadow: 0 1px 0 #528ecc;
}
2. Modify the first <a> tag in app.component.html as follows:
<a class="button"
routerLink="/student"
routerLinkActive="activebutton"
ariaCurrentWhenActive="page">Student List</a> |
See the browser output.
No comments:
Post a Comment