Angular2 'blockquote-reverse' is not a known element

Question

I am trying to use a element tag provided by bootstrap 3.3.6 and when use that in my component view, it throws me the error as unknown element.

any idea how to fix this?

error getting is 'blockquote-reverse' is not a known element

html view where blockquote-reverse is provided in bootstrap:

<blockquote-reverse>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote-reverse>

When I do I am getting Error in app/views/footer.component.html:2:81 caused by: Maximum call stack size exceeded

<blockquote class="blockquote-reverse">
  <p>Angular2 have a simplified functionality</p>
  <footer>This is what we can<cite title="Source Title">Anirudha Das</cite></footer>
</blockquote>

I can avoid this by not using but I really understand why angular2 is behaving this/

Answer 1

Because you should be using .blockquote-reverse as class name and not as an element name:

<blockquote class="blockquote blockquote-reverse">
  ...
</blockquote>

More info here

Edit:

Also your footer.component it's calling himself recursively

Answer 2

you should use this:

<blockquote class="blockquote blockquote-reverse">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

per the documentation