i have written an angular 9 component that has collapse controls. Its seems like collapse don't work on Edge browser
I have tried two different types of collapse components
- ng-bootstrap collapse
- ngb-accordion
and both did not work on edge browser
<!--
===============================================
the code code with "ng-bootstrap collapse "
==============================================
-->
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g{{ei}}"
*ngFor="let g of this.survey?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<!-- <i class="fa fa-align-justify"></i> Combined All Table -->
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed[ei] = !isCollapsed[ei]"
[attr.aria-expanded]="!isCollapsed[ei]">
<i class="mdi mdi-chevron-down"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed[ei]" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body" style="border: 1px solid red">
<!-- The core of the Suervey Question and stars -->
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<div style="border:1px solid blue;"
id="qrow_rating_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<star-rating id="rating_{{q?.QuestionId}}"
value='{{this.ratedValue}}'
totalstars="5"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'rating_', q?.QuestionId, q?.FeedbackTypeId )">
</star-rating>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<br>
<!-- <div id="qrow_rating_{{rnum}}_g{{ei}}" *ngIf="q?.FeedbackTypeId==2"> -->
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_rating_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
<!-- ./ The core of the Suervey Question and stars -->
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:0px solid black;text-align:center; margin-left: 2%;margin-right: 2%;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
the code with ngb-accordion
<!--
===============================================
the code code with "ngb-accordion"
==============================================
-->
<ngb-accordion #a="ngbAccordion" activeIds="custom-panel-1">
<ngb-panel id="custom-panel-g{{ei}}" *ngFor="let g of this.survey?.MyQuestionGroup;let ei=index;">
<ng-template ngbPanelHeader let-opened="opened">
<div class="d-flex align-items-center justify-content-between">
<h5 class="m-0">{{g?.QuestionGroupName}} - {{ opened ? 'opened' : 'collapsed' }}</h5>
<button ngbPanelToggle class="btn btn-link p-0">Toggle first</button>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div class="card">
<div class="card-body">
<div class="row" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 1px solid red;">
<div class="column" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{rnum + 1}}.{{q?.QuestionText}}
</div>
<div style="border:1px solid black;align-items: center;"
id="qrow_rating_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1">
<star-rating id="rating_{{q?.QuestionId}}"
value='{{this.ratedValue}}'
totalstars="5"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'rating_', q?.QuestionId, q?.FeedbackTypeId )">
</star-rating>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
{{q?.QuestionText}}
</div>
<br>
<!-- <div id="qrow_rating_{{rnum}}_g{{ei}}" *ngIf="q?.FeedbackTypeId==2"> -->
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_rating_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
</div>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:1px solid black;text-align:center;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
In both cases everything works well with chrome but in Edge browser it throws errror it seems like this bug appears when i click the 'toggle first' to toggle collapse.
Here is the error shown on Edge browser ::
ERROR TypeError: Object doesn't support property or method 'attachShadow'
Function code (194) (51,3)
[object Error]: {description: "Object doesn't support property or method 'attachShadow'", message: "Object doesn't support property or method 'attachShadow'", ngDebugContext: Object, ngErrorLogger: function() { [native code] }, number: -2146827850...}
description: "Object doesn't support property or method 'attachShadow'"
message: "Object doesn't support property or method 'attachShadow'"
ngDebugContext: Object
ngErrorLogger: function() { [native code] }
number: -2146827850
stack: "TypeError: Object doesn't support property or method 'attachShadow' at ShadowDomRenderer (http://localhost:4200/vendor.js:84485:13) at DomRendererFactory2.prototype.createRenderer (http://localhost:4200/vendor.js:84321:17) at AnimationRendererFactory.prototype.createRenderer (http://localhost:4200/vendor.js:83319:9) at DebugRendererFactory2.prototype.createRenderer (http://localhost:4200/vendor.js:75426:9) at createComponentView (http://localhost:4200/vendor.js:74407:9) at callWithDebugContext (http://localhost:4200/vendor.js:75405:9) at debugCreateComponentView (http://localhost:4200/vendor.js:74939:5) at createViewNodes (http://localhost:4200/vendor.js:74448:21) at createEmbeddedView (http://localhost:4200/vendor.js:74391:5) at callWithDebugContext (http://localhost:4200/vendor.js:75405:9)"
__proto__: Error
ERROR CONTEXT [object Object]
Function code (194) (51,3)
[object Object]: {component: <Permission denied>, componentRenderElement: <Permission denied>, context: <Permission denied>, elDef: Object, elOrCompView: <Permission denied>...}
component: <Permission denied>
componentRenderElement: <Permission denied>
context: <Permission denied>
elDef: Object
elOrCompView: <Permission denied>
elView: Object
injector: Object
nodeDef: Object
nodeIndex: 3
providerTokens: Array
references: Object
renderNode: <Permission denied>
view: Object
__proto__: Object
How do i fix this issue?
If Edge browser fails on collapse controls...what is the best control to use instead of collapse and accordion that provides similar functionality and that will also work on both EDGE and Chrome?