Having two DOMs as depicted in the figures, I'm facing an issue where the circled <div class=panel-heading largeText"> in the first template receives a style of [_ngcontent-c1], while that same <div> gets the style of panel-primary > .panel-heading. The templates are outlined in Figure 3 and 4. Does anyone have insights on what might be causing this problem? Also, where can I locate documentation on the [class.active] attribute? Thank you.
Figure 1: https://i.stack.imgur.com/L7umd.png
Figure 2: https://i.stack.imgur.com/2Qqvs.png
Figure 3:
<div *ngIf="show">
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading largeText">
Hep C Note
</div>
<div class="panel-body">
<div class="row">
<div class="col col-md 12">
<form #hepcFormVar="ngForm" novalidate>
<div class="form-group">
<label class="control-label">Patient:</label>
<span name="patientName" class="largeText">{{patientName}}</span>
</div>Figure 4:
<div *ngIf="show">
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading largeText">
Vista Note
</div>
<div class="panel-body">
<div class="row">
<div class="col col-md 12">
<form #vistaNoteFormVar="ngForm" novalidate>
<div class="form-group">
<label class="control-label" for="patientName">Patient:</label>
<span name="patientName" id="patientName" class="largeText">{{patientName}}</span>
</div>