Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap

Check out the full series of Questions Management tutorial here. After we have completed the display of the questions, now we will implement the detail for the missing parts in this page, including adding a new question, viewing the contents of a question, editing and deleting a question. The first thing that I will do is build a page that displays the content of a question! To display the information of a question, we will retrieve its information based on its id. First, I will add a method in the QuestionsService class to make call to the API to find question by id of the API Question Service as follows:

findQuestionById(id: String): Promise {
    return this.http.get("/question/" + id).toPromise();
}

findQuestionById(id: String): Promise {

return this.http.get("/question/" + id).toPromise();

}

Next we will create a new component called QuestionComponent located in the src/app/questions/all_questions directory. This component will use the findQuestionById() method of the QuestionsService class to search for the content of the question based on id, which is retrieved from the ActivatedRoute object as follows:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "../../../../node_modules/@angular/router";
import { QuestionsService, CompositeQuestion } from "../../services/questions.service";

@Component({
    selector: 'qm-body',
    templateUrl: './question.component.html'
})
export class QuestionComponent implements OnInit {

    compositeQuestion: CompositeQuestion;

    questionId: string;

    constructor(private route: ActivatedRoute, private questionsService: QuestionsService) {

    }

    ngOnInit(): void {
        this.questionId = this.route.snapshot.params['id'];

        this.questionsService.findQuestionById(this.questionId).then(r => {
            this.compositeQuestion = r;
        });
    }
}

import { Component, OnInit } from "@angular/core";

import { ActivatedRoute } from "../../../../node_modules/@angular/router";

import { QuestionsService, CompositeQuestion } from "../../services/questions.service";

@Component({

selector: 'qm-body',

templateUrl: './question.component.html'

})

export class QuestionComponent implements OnInit {

compositeQuestion: CompositeQuestion;

questionId: string;

constructor(private route: ActivatedRoute, private questionsService: QuestionsService) {

}

ngOnInit(): void {

this.questionId = this.route.snapshot.params['id'];

this.questionsService.findQuestionById(this.questionId).then(r => {

this.compositeQuestion = r;

});

}

The question.component.html file has the following contents:

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Question</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <div>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Question</label>
                    <p class="form-control-static">{{ compositeQuestion.description }}</p>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <p class="form-control-static">{{ compositeQuestion.category.name }}</p>
                </div>
                <div class="form-group">
                    <label>Options</label>
                    <ul *ngFor="let option of compositeQuestion.options">
                        <li>
                            {{ option.description }} | 
                            <a href="#"> Edit</a> | 
                            <a href="#"> Delete</a>
                        </li>
                    </ul>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add New Option</button>
                </div>
            </div>
            <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
</div>

<h1 class="page-header">Question</h1>

</div>

</div>

<div>

<label>Question</label>

<p class="form-control-static">{{ compositeQuestion.description }}</p>

</div>

<label>Category</label>

<p class="form-control-static">{{ compositeQuestion.category.name }}</p>

</div>

<label>Options</label>

<li>

{{ option.description }} |

<a href="#"> Edit</a> |

<a href="#"> Delete</a>

</li>

</ul>

</div>

<button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add New Option</button>

</div>

</div>

</div>

Now we will declare the AllQuestionsComponent in QuestionsModule:

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";
import { QuestionComponent } from "./all_questions/question.component";
import { AppRoutingModule } from "../app-routing.module";

@NgModule({
    declarations: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        AppRoutingModule
    ],
    exports: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent
    ]
})
export class QuestionsModule {

}

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";

import { QuestionComponent } from "./all_questions/question.component";

import { AppRoutingModule } from "../app-routing.module";

@NgModule({

declarations: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent

imports: [

CommonModule,

FormsModule,

AppRoutingModule

exports: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent

]

})

export class QuestionsModule {

}

And declare Routing for it:

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';
import { QuestionComponent } from './questions/all_questions/question.component';

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'categories', component: CategoriesComponent },
    { path: 'questions', component: AllQuestionsComponent },
    { path: 'question/:id', component: QuestionComponent },
    { path: '**', pathMatch: 'full', redirectTo: '/' }
]

@NgModule({
    imports: [
        RouterModule.forRoot(routes)  
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

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';

import { QuestionComponent } from './questions/all_questions/question.component';

const routes: Routes = [

{ path: '', component: DashboardComponent },

{ path: 'dashboard', component: DashboardComponent },

{ path: 'categories', component: CategoriesComponent },

{ path: 'questions', component: AllQuestionsComponent },

{ path: 'question/:id', component: QuestionComponent },

{ path: '**', pathMatch: 'full', redirectTo: '/' }

]

@NgModule({

imports: [

RouterModule.forRoot(routes)

exports: [

RouterModule

]

})

export class AppRoutingModule { }

The last step we need to do is revise the table displaying all the questions in the all_questions.component.html file, the Actions section, from:

<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button> &nbsp;

1	<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button>

to:

<a class="btn-primary btn-circle fa fa-eye" routerLink="/question/{{ c.id }}"> </a> &nbsp;

1	<a class="btn-primary btn-circle fa fa-eye" routerLink="/question/{{ c.id }}"> </a>

At this point we have completed the construction of the display content of a question. Now if you run the application again, go to the “All Questions” page:

Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap

Click on the eye icon in any line of the table, you will see results similar to the following:

Khanh Nguyen

Share this post

Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap

Add Comment Cancel reply

Khanh Nguyen

Share this post

You might also like...

Questions Management – Implement Turbine Stream with RabbitMQ

Questions Management – Support Turbine Stream – Initialize support-turbine-stream project using Spring Tool Suite

Questions Management – Support Monitor Dashboard – Implement Hystrix Dashboard

Questions Management – Support Monitor Dashboard – Initialize support-monitor-dashboard project using Spring Tool Suite

Add Comment Cancel reply