I am using hljs (imported in index.html), and 'ngx-highlight-js'. I want to create subcomponent that shows code snippet preview. Everything works good when I manually put in code like this:
<textarea highlight-js [options]="{}" [lang]="'typescript'">
import os
import sys
if __name__ == "__main__":
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "wagtail_galery.settings.dev")
from django.core.management import execute_from_command_line
execute_from_command_line(sys.argv)
</textarea>
But, when I want to pass code using string variable, html element in browser is empty (code is propety of angular component).
<textarea highlight-js [options]="{}" [lang]="'typescript'">
{{ code }}
</textarea>
More code if you need (full can be found on this commit, but if you relate your answer to code that I didn't provided in question as text, please point that in your answer):
codeblock.component.html
<textarea highlight-js [options]="{}" [lang]="'typescript'">
{{ code }}
</textarea>
codeblock.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-codeblock',
templateUrl: './codeblock.component.html',
styleUrls: ['./codeblock.component.sass']
})
export class CodeblockComponent{
@Input() code:string;
}
home.component.ts
import { Component, OnInit } from '@angular/core';
/* Standard page elements imports */
import { HeaderComponent } from '../header/header.component';
import { TextComponent } from '../text/text.component';
import { CodeblockComponent } from '../text/text.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
constructor() { }
Header:string = 'Welcome to MyDocs!';
Text:string = 'This site is simple styled, piece of documentation for my own, open-source projects. Here you can read how my code works.';
Code:string = 'Welcome to MyDocs!';
ngOnInit() {
}
}
home.component.html
<app-header [title]='Header'>
</app-header>
<app-text [text]='Text'>
</app-text>
<app-codeblock [code]='Code'>
</app-codeblock>
</div>