Why is my tag closing early for the section tag?

Issue

I am getting an error and says the ‘section’ is closed by another tag.

I checked my HTML and everything looks good.

<ng-container *ngIf="display$ | async as display">
    <section [class.open]="display === 'open'" (click)="close()">
             <div (click)="$event.stopPropagation()">
                <button class="close" type="button" (click)="close()">X</button>
    
    <div class="dateAlignment">
        <div class="dateComponent">
            <div class="date-selection">        
                <div class="month">
                    <input type="text" [(ngModel)]="selectedMonth"   list="correctionMonth" placeholder="Month...." >
                    <datalist id="correctionMonth">
                        <option value="{{item.Name}}" [selected]="item.isSelected" *ngFor="let item of selectedMonthArray">{{item.id}}</option>
                    </datalist>
                </div>
                <div class="year">
                    <input type="text" [(ngModel)]="selectedYear"  list="correctionYear" placeholder="Year...." >
                    <datalist id="correctionYear">
                        <option value="{{item}}" *ngFor="let item of yearArray">{{item}}</option>
                    </datalist>
                </div>    
            </div>
            <div class="buttongroup">
                <div class="submit">
                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                        <div class="btn-group btn-group-lg" role="group" aria-label="First group">
                        <button type="button" class="btn btn-secondary reportButton">Correction Notices</button>
                        <button type="button" class="btn btn-secondary reportButton">Display Tablular Data</button>
                        <button type="button" class="btn btn-secondary reportButton">Mailing Labels</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="submitgroup">
                <div class="reportApplication">
                    <button type="button" class="btn btn-success">Apply</button>
                    <button type="button" class="btn btn-danger">Reset</button>      
                </div>
            </div>
        </div>
    </div>
    </section>    
</ng-container>

enter image description here

Solution

One of your div tags is unclosed. Maybe you meant to enclose the <button> tag in a div?

<section [class.open]="display === 'open'" (click)="close()">
    <div (click)="$event.stopPropagation()">
          <button class="close" type="button" (click)="close()">X</button>
    </div>

Answered By – julianatkin

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.