Check out the full series of Questions Management tutorial here.
For easy management of all questions, the Questions Management application will set aside a separate page for displaying all information about all questions. This page will allow us to go to another page displaying the information of a question and the options of that question, allowing us to edit, delete, and add new options to any question. OK, let’s get start.
The first thing is to add a menu item “All Questions” in the Questions menu item in the left sidebar.
In the previous tutorial, I added the menu item “Categories” then. Now I will add a new “All Questions” menu item in the sidebar.component.html file as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<li> <a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a routerLink="#">All Questions</a> </li> <li> <a routerLink="/categories">Categories</a> </li> </ul> <!-- /.nav-second-level --> </li> |
At this point, if you run the application, you will see the results of the left menu as follows:
Next, I will create a new component called AllQuestionsComponent located in the src /app/questions/all_questions directory.
The content of AllQuestionsComponent will look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component, AfterViewInit } from "../../../../node_modules/@angular/core"; declare var $: any; @Component({ selector: 'qm-body', templateUrl: './all_questions.component.html' }) export class AllQuestionsComponent implements AfterViewInit { ngAfterViewInit(): void { $('#dataTables-questions').DataTable({ responsive: true }); } } |
with the file all_questions.component.html has content as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Questions</h1> </div> <!-- /.col-lg-12 --> </div> <div> <div class="row"> <div class="col-lg-12"> <button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add New</button><p></p> <div class="panel panel-default"> <div class="panel-body"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-questions"> <thead> <tr> <th>Description</th> <th>Category</th> <th>Actions</th> <th>Options</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td> <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-edit"></i></button> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-trash"></i></button> </td> <td> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button> </td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td> <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-edit"></i></button> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-trash"></i></button> </td> <td> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button> </td> </tr> </tbody> </table> <!-- /.table-responsive --> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div> </div> |
Now we will declare the AllQuestionsComponent in QuestionsModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { NgModule } from "@angular/core"; import { CategoriesComponent } from "./categories/categories.component"; import { CommonModule } from "@angular/common"; import { FormsModule } from '@angular/forms'; import { AllQuestionsComponent } from "./all_questions/all_questions.component"; @NgModule({ declarations: [ CategoriesComponent, AllQuestionsComponent ], imports: [ CommonModule, FormsModule ], exports: [ CategoriesComponent, AllQuestionsComponent ] }) export class QuestionsModule { } |
And declare Routing for it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; import { CategoriesComponent } from './questions/categories/categories.component'; import { AllQuestionsComponent } from './questions/all_questions/all_questions.component'; const routes: Routes = [ { path: '', component: DashboardComponent }, { path: 'dashboard', component: DashboardComponent }, { path: 'categories', component: CategoriesComponent }, { path: 'questions', component: AllQuestionsComponent }, { path: '**', pathMatch: 'full', redirectTo: '/' } ] @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } |
The last step we need to do is to edit the left menu for the “All Questions” menu item using the Angular routerLink directive so that we can navigate to the “All Questions” page.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<li> <a href="#"><i class="fa fa-question fa-fw"></i> Questions<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a routerLink="/questions">All Questions</a> </li> <li> <a routerLink="/categories">Categories</a> </li> </ul> <!-- /.nav-second-level --> </li> |
Now, if you run the application again and go to the “All Questions” page, you will see the following result:
