angular - Hide and show the div on particular path

Question

I have div and I need to show it on a particular(mentioned below) path. Thanks in advance.

Path

{ path: 'preview/:questionid', component: QuestionPreviewComponent, outlet: 'questions' }

http://localhost:3000/admin/questions/(questions:preview/5cb18f686560a2f98b43f8e0)

Routing Module

 imports: [RouterModule.forChild([
    { path: '', redirectTo: 'questions', pathMatch: 'full'},
    { path: 'questions', component: QuestionsComponent, children: [
      { path: '', component: QuestionListComponent, outlet: 'questions' },
      { path: 'bulk-upload', component: BulkUploadQuestionsComponent, outlet: 'questions' },
      { path: 'new', component: NewEditQuestionComponent, outlet: 'questions' },
      { path: 'edit/:id', component: NewEditQuestionComponent, outlet: 'questions' },
      { path: 'preview/:questionid', component: QuestionPreviewComponent, outlet: 'questions' }

    ]}
    ])],

Answer 1

There is couple of ways to do that one of them is as below...

I guess you have CSS code which shows your div suppose your class name is .displayDiv that class only hit when your the URL is something. http://localhost:3000/admin/questions/(questions:preview/5cb18f686560a2f98b43f8e0)

on component.ts file of QuestionPreviewComponent where you have to take variable like below...

pathName: any;

on

ngOnInit() {
this.pathName = location.pathname.split('/');
}

on HTML file of QuestionPreviewComponent

<div [ngClass]='pathName[2] === questions ? "displayDiv" : ""'>
------------------
------------------
Your code
-----------------
-----------------
</div>

You can leave else condition or add hide CSS if you prepare