docs(navigation-drawer): remove nav tag since it is added from the component itself#5989
docs(navigation-drawer): remove nav tag since it is added from the component itself#5989
Conversation
# Conflicts: # en/components/navdrawer.md # jp/components/navdrawer.md
There was a problem hiding this comment.
Pull request overview
Updates the Navigation Drawer documentation examples to avoid wrapping drawer content in an extra <nav> element when the component already provides the appropriate semantic container.
Changes:
- Removes
<nav>wrappers from severaligxDrawertemplate examples in KR/EN/JP docs. - Updates KR router examples formatting to remove the
<nav>wrapper around repeated drawer items. - Fixes JP reference list formatting at the end of the topic.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
kr/components/navdrawer.md |
Removes <nav> wrappers from drawer templates, including router examples. |
jp/components/navdrawer.md |
Removes <nav> wrappers from examples and normalizes the final reference list formatting. |
en/components/navdrawer.md |
Removes <nav> wrappers from the introductory examples (but one <nav> remains later in the Router section). |
Comments suppressed due to low confidence (1)
jp/components/navdrawer.md:354
- Prefer property binding for
routerLinkhere as well (e.g.,[routerLink]="item.link") instead ofrouterLink="{{item.link}}". This avoids interpolation in an attribute value and keeps the RouterLink directive input typed consistently.
<span
*ngFor="let item of componentLinks"
routerLink="{{item.link}}"
routerLinkActive
#rla="routerLinkActive"
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ```html | ||
| <!-- app.component.html --> | ||
| <div class="content-wrap"> | ||
| <igx-nav-drawer id="navigation" #drawer [isOpen]="true"> | ||
| <ng-template igxDrawer> | ||
| <nav> | ||
| <span igxDrawerItem [isHeader]="true">Components</span> | ||
| <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)"> | ||
| <igx-icon fontSet="material">{{ item.name }}</igx-icon> | ||
| <span>{{ item.text }}</span> | ||
| </span> | ||
| </nav> | ||
| </ng-template> |
There was a problem hiding this comment.
This doc removes the extra <nav> wrapper in the early examples, but there is still a <nav> wrapper later in the same file in the "Using Angular Router" example (around line 347). That leaves the topic inconsistent with the stated goal (and can reintroduce nested <nav> landmarks if the component already renders one). Please remove that remaining <nav> wrapper or clarify why it is required specifically in that section.
| <span *ngFor="let item of componentLinks" routerLink="{{item.link}}" | ||
| igxDrawerItem igxRipple | ||
| routerLinkActive="igx-nav-drawer__item--active" > | ||
| {{item.name}} | ||
| </span> |
There was a problem hiding this comment.
In Angular templates, prefer property binding for routerLink instead of string interpolation in an attribute. Using [routerLink]="item.link" (or an array form) avoids unnecessary string interpolation and keeps the directive input typed as intended.
| <span *ngFor="let item of componentLinks" routerLink="{{item.link}}" | ||
| routerLinkActive #rla="routerLinkActive" | ||
| igxDrawerItem igxRipple [active]="rla.isActive"> | ||
| {{item.name}} | ||
| </span> |
There was a problem hiding this comment.
Same as above: use property binding for routerLink (e.g., [routerLink]="item.link") rather than routerLink="{{item.link}}" to keep the RouterLink input typed and avoid interpolation in attribute values.
Related to IgniteUI/igniteui-angular#14847
Checklist:
preview\beta../relative/path.mdIgxSelectComponent,<igx-combo>code blocksfor the names of classes / tags / propertiescode blockspending-localizationlabel when the review of the PR is done