Bootstrap Accordion example not working with Angular 4 [innerHTML]

Question

I'm trying to implement the Bootstrap Accordion example in my Angular 4 app.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

It works like a charm when I put this code in my html file directly but when i try to pass this code dynamically in my html file as [innerHTML] it doesn't work.

I've inspected in dev tools and found that in the case of the latter the anchor tag only has

<a class="collapsed" role="button" href="#collapseOne">

instead of

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

I also think that it has got nothing to do with ViewEncapsulation.None as I've tried that and it doesn't help. I've also tried used @ng-bootstrap/ng-bootstrap.

I'm new to Angular and trying to understand what is it that I am missing? Any help is highly appreciated.

Thanks @ConnorsFan. Updated question with corrected spelling. — CodeWarrior
– CodeWarrior, Commented Mar 5, 2018 at 1:20
I assume that updating to [innerHTML] did not magically resolve your problem ? — Zze
– Zze, Commented Mar 5, 2018 at 1:31
@Zze No, it did not, apparently, angular works just fine with [innerHtml] as well — CodeWarrior
– CodeWarrior, Commented Mar 5, 2018 at 1:36

Zze · Accepted Answer · 2018-03-05 02:20:11Z

1

When you manually inject content into the DOM via bindings such as [innerHtml] or [src] by default angular will try to protect your users from security risks / Cross Site Scripting Security Bugs

[The] DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

For example, when binding a URL in an hyperlink, someValue will be sanitized so that an attacker cannot inject e.g. a javascript: URL that would execute code on the website.

In specific situations, it might be necessary to disable sanitization, for example if the application genuinely needs to produce a javascript: style link with a dynamic value in it. Users can bypass security by constructing a value with one of the bypassSecurityTrust... methods, and then binding to that value from the template.

https://angular.io/api/platform-browser/DomSanitizer

The bold in this quote is exactly what we need to do here in order to achieve this.

Here is a working example using the DOMSanitizer to bypass the sanitize process for your injected html.

The crux of the example is here:

// inject the DomSanitizer
constructor(private _sanitizer: DomSanitizer){}
// bypass the sanitizer 
public get htmlProperty() : SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
}

Where this._htmlPropertyis the massive chunk of html you have in your question as a string.

Note: This is a classic gotcha for people whom are just getting on the angular bandwagon. The whole sanitizing process is great for security but is my least favourite angular feature as it is a constant annoyance to have to implement this.

Additional Note: Consider if your specific implementation should be split out into it's own component which can then be referenced later in the shape of something like: <app-bootstrap-accordion [data]="accordionData"></app-bootstrap-accordion> where accordionData is an object containing say an array of panel data which will generate a dynamic accordion.

edited Mar 5, 2018 at 2:20

answered Mar 5, 2018 at 1:55

Zze

18.9k14 gold badges95 silver badges125 bronze badges

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

6 Comments

Zze Over a year ago

I updated the example to only include 1 accordion now.

Zze Over a year ago

@CodeWarrior I personally try to keep my [innerHtml] binding / injection as low as possible, it isn't really the "angular" way - but a lot of people whom come from a jquery background like to use it. (See my additional note in the answer). Glad I could help :)

CodeWarrior Over a year ago

I took your advice and made a new component and it works great but when I was doing it the previous way it was giving me this message on the screen safe value must use property =binding. I was passing the sanitized HTML as property binding, then why this message and it was showing up on my screen where I had the accordion i.e. on the UI.

Zze Over a year ago

@CodeWarrior I'm not entirely sure I understand your question, you may have to post a new question w/ code etc to clarify... However this is an example of how I would implement the accordion in it's own component: stackblitz.com/edit/… - let me know.

CodeWarrior Over a year ago

<li *ngFor="let item of array"> <div [innerHtml]="item.accordioncontent"></div> </li> This is the code I have in my html and in my .ts file I'm looping the array and based on a condition I'm doing this array[i].accordioncontent = this._sanitizer.bypassSecurityTrustHtml(array[i].accordioncontent ) @Zze Lemme know if this is still not clear and post a new question

|

Rodrigo Soares · Accepted Answer · 2018-06-06 15:43:24Z

0

You can use [attr.data-parent]="'#bs-collapse_'+index" where index is a variable.

answered Jun 6, 2018 at 15:43

Rodrigo Soares

3575 silver badges10 bronze badges

Collectives™ on Stack Overflow

Bootstrap Accordion example not working with Angular 4 [innerHTML]

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related