How to show code example of an Angular Component from within an Angular 8 app's HTML?

Question

I am trying to create an app to document internal reusable components for my company but am having trouble figuring out how to display Angular Typescript code from within my Angular documentation app.

Whenever I try to do this, I see the following error:

Error in @angular/[email protected]/bundles/compiler.umd.js (2603:21)
Template parse errors:
Invalid ICU message. Missing '}'. ("
export class SliderComponent {}

[ERROR ->]</code>"): ng:///AppModule/AppComponent.html@9:0

And the only code I really have in the project is in the app.component.html file and it looks like this:


<code>
  @Component({
        selector: 'app-slider-alt',
        templateUrl: './slider-alt.template.html',
        styleUrls: ['./slider.component.scss']
      })
      export class SliderComponent {}

</code>

Stackblitz link

Any ideas?

julianobrasil · Accepted Answer · 2020-06-04 18:09:18Z

1

The problem is the curly braces. You can replace them with:

{ => {
} => }

<code>
@Component(&#123;
  selector: 'app-slider-alt',
  templateUrl: './slider-alt.template.html',
  styleUrls: ['./slider.component.scss']
&#125;)
export class SliderComponent &#123;&#125;
</code>

Also, I think it looks nicer with <pre> instead of <code>

Stackblitz demo

edited Jun 4, 2020 at 18:09

answered Jun 4, 2020 at 0:44

julianobrasil

9,4472 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pytth Over a year ago

Thank you so much for your response. I think that got me in the right direction, but then angular starts complaining about the "@" sign, so I switched that to the HTML number, and then it started complaining about "Component` to which I switched the "C" to the html number but it wouldn't stop complaining about it.

julianobrasil Over a year ago

That's weird... it's working on stackblitz.

Pytth Over a year ago

Maybe it's cause I am doing quite a bit more locally. But you are right it does work in Stackblitz. Thanks for your help!

Collectives™ on Stack Overflow

How to show code example of an Angular Component from within an Angular 8 app's HTML?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related