Introduction

This is the last part of Part 9 where finally we will render the dynamically created page. The menu and page are connected to each other through the menu ID. When a user clicks on any menu item, the menu ID is being passed to View Page. We will remove all the static HTML and related typescript in ViewPage component, write new code to take the menu ID and load the corresponding page’s HTML from the database. We will also introduce a new Pipe to properly render the HTML.

Let’s Start

It is strongly recommended to read all previous parts before moving to this one, I can’t promise you would understand all the steps I am going to list down without knowledge of previous parts.

1. As always, make sure the last part is working fine, you are successfully able to Add, Update and Delete the page and its content.
2. First, let’s create a custom Pipe to bypass any kind of HTML special characters e.g. any type of scripting (Javascript, C#, Java, etc.) to properly view the code on the screen, this is an optional step if you know that it is not required for your application, it’s better NOT to use it cause it makes your application vulnerable to Cross Site Scripting (XSS) where user can inject malicious Javascript in your code and screw your application. I am only using it here to show you how you can actually use the DomSanitizer class. Read more about DomSanitizer from here.
3. Right-click on src -> app -> shared folder, select the option, New File. Enter the name keepHtml.pipe.ts. Paste the following code in it:

4. The class metadata defines that it is a Pipe with the name keepHtml. We are implementing a PipeTransform interface that has only one method transform taking the input value that in our case would be the page HTML. The bypassSecurityTrustHtml() method will let all HTML render as it is without sanitizing the potential dangerous text e.g. <script>some crapy script</script> that otherwise would be viewed as &lt;script&gt;some crapy script&lt;/script&gt; where < and > are converted into &lt and &gt to avoid executing the unwanted script.
5. Next, add the reference of keepHtml Pipe in AppModule, edit the src -> app -> app.module.ts and replace its content with the following:  

6. Now, edit the src -> app -> client -> view-page -> view-page.component.css and replace its content with our famous CSS:  

mat-card
{
  margin: 0px;
  padding: 0px;
}

mat-card-noshadow{ 
    background: #ECECF4;
    box-shadow: none !important;
}

mat-card-content{
  margin: 0px;
  padding: 0px;
}

.header
{
background: #45484d;
border-bottom: 5px solid #393B3E;
height: 50px;
padding-left: 5px;
}

.subheader
{
height: 40px;
background: #5B5C60;
}

.subheader_title{
    vertical-align:baseline;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 13pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #C8CCD2;
}

.header_title{
    vertical-align:baseline;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #A1A9AF;
}

.card_cntnt
{
    padding: 15px;
    padding-bottom: 15px;
}
.content_header
{
    font-size:16pt;
    color: coral;
  
}
.content_subheader
{
    color: #908482;
}

7. Next, src -> app -> client -> view-page -> view-page.component.html and replace its content with following:  

<mat-card>
  <mat-card-header class="header">
    <mat-card-title class="header_title">{{page.Title}}</mat-card-title>
  </mat-card-header>
  <mat-card-content class="card_cntnt">
    <div [innerHTML]="page.Content | keepHtml"></div>
  </mat-card-content>
</mat-card>

8. You can see, the page title is coming from page object that is loading from the database, in <div [innerHTML]="page.Content | keepHtml"></div>, we are assigning the page.Content and using our newly created Pipe keepHtml to bypass the special script related characters to view everything to a user without HTML sanitization. 
9. Edit the src -> app -> client -> view-page -> view-page.component.ts and replace its code with the following:

10. That’s pretty simple code:
    1. On a top, we specify the API endpoint (/api/page/id) to load the page by menu ID. 
    2. In a constructor, we are creating the DataService and ActivatedRoute services object. The route object is used to get the [routerLink] parameter value passed to the ViewPage component. (check the app.component.html for reference). 
    3. The params['id'] is a menu ID that is passed to loadContentbyId() function to load the page from the database. 
    4. The loadContentbyId() function is taking menu ID as an input parameter, concatenating it with API URL and calling the data service GET method to load the page record from the database. The result is stored in a page object that we are using in view-page.component.html to show the page data on a screen.
11. That’s all for Part 9. Now, create different menu items, pages and check if you are successfully able to see them on screen. I am also attaching the small video for your view where first I will
    1. Go to the admin section.
    2. Go to Menus Management.
    3. Create a new menu.
    4. Go to Page Management.
    5. Create a simple page and save it.
    6. After refreshing the website, both menu and page would be visible on a screen.