Disable Angular 2 sanitization - html

Question

I've seen a few answers to this question and tried all of them, but it still isn't working. I'm kinda trying to write a CMS in angular 2; so a backend where someone puts HTML and a frontend that renders said HTML. I am able to display some HTML with DomSanitizer.bypassSecurityTrustHtml() but not others. For example, I am able to add an <img class="center" src=""> but a <button md-button>test</button> is rendered as a plain HTML button. I also have a LessonComponent w/a lesson selector, but it isn't rendered at all on the page, I do see the <lesson></lesson> HTML in the inspector.
How (if possible) do I display components on the page from a DB? Code below:
lesson.ts
import { Component, Inject, Input, SecurityContext } from '#angular/core';
import { MdDialog, MD_DIALOG_DATA } from '#angular/material';
import { Lesson, LessonService } from '../lesson.service';
import { DomSanitizer, SafeHtml} from '#angular/platform-browser';
#Component({
selector: 'lesson',
templateUrl: './lesson.html',
styleUrls: ['./lesson.scss']
})
export class LessonComponent {
#Input() lessonID: number = 0;
#Input() questionID: string = '';
lesson: Lesson;
constructor(public service: LessonService, public dialog: MdDialog, private sanitizer: DomSanitizer) { }
getLesson(): object {
if(!this.service.getLesson(this.lessonID)) { return {}; }
let lesson = this.service.getLesson(this.lessonID)['pages'].filter(lesson => {
return lesson['id'] === this.questionID;
})[0];
if(lesson && lesson['buttons']) {
this.service.buttons = lesson['buttons'];
} else {
this.service.buttons = [];
}
lesson['test'] = this.sanitizer.bypassSecurityTrustHtml(lesson['content']);
return lesson;
}
doClick(btnID) {
let button = this.getLesson()['buttons'].filter(btn => {
return btn['id'] === btnID;
})[0];
this.dialog.open(ExtraDialog, { data: button['content'] });
}
}
#Component({
selector: 'extra-dialog',
template: `{{data}}`
})
export class ExtraDialog {
constructor(#Inject(MD_DIALOG_DATA) public data: any) {}
}
lesson.html
<div *ngIf="!getLesson()" >
Error: Lesson {{lessonID}} -> question {{questionID}} is not a known lesson or question. Please click <a routerLink="/lesson/1">here</a> to go to the first lesson.
</div>
<div *ngIf="getLesson() && getLesson()['buttons']">
<span *ngFor="let button of getLesson()['buttons']">
<button md-mini-fab (click)="doClick(button.id)"><md-icon>{{button.icon}}</md-icon></button>
</span>
</div>
<div *ngIf="getLesson()">
<h2>{{getLesson()['title']}}</h2>
<p [innerHTML]="getLesson()['test']"></p>
</div>
lesson.service.ts
import { Injectable } from '#angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
export class Lesson {
constructor(public id: number, public pages: Object[]) { }
}
#Injectable()
export class LessonService {
private lessons: Lesson[] = [];
public buttons: object[];
constructor(public db: AngularFireDatabase) {
this.db.object('/lessons', { preserveSnapshot: true }).subscribe(lessons => {
this.lessons = [];
lessons.forEach(lesson => {
let pages = [];
if(lesson.val()['pages']) {
Object.keys(lesson.val()['pages']).forEach(key => {
let page = {
id: key,
title: lesson.val()['pages'][key]['title'],
content: lesson.val()['pages'][key]['content']
};
let buttons = lesson.val()['pages'][key]['buttons'];
if(buttons) {
page['buttons'] = [];
Object.keys(buttons).forEach(key => {
page['buttons'].push({
content: buttons[key]['content'],
icon: buttons[key]['icon'],
id: key
});
});
}
pages.push(page);
});
}
this.lessons.push(new Lesson(
lesson.key,
pages
));
});
});
}
getLessons() { return this.lessons; }
getLesson(id: number): Lesson {
return this.lessons.filter(lesson => {
return lesson['id'] == id;
})[0];
}
}