How do I show link text when sidebar is collapsed in Angular 9? - css

Question

I know if i put title="link name" into the anchor tag, the description or title shows up. But I only want it to show, when the navbar is collapsed.
In the html file I have a lot more links but to save space I opted to show the rest.
.html template
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav nav-sb metismenu" id="side-menu">
<li class="nav-header" style="padding-top: 0px; padding-bottom: 0px;">
<div (click)="handleClick($event)">
<div class="profile-element" style="text-align: center;">
<img alt="image" style="max-width: 100%; max-height: 60px; text-align: center;" src="assets/images/nieto.jpg">
</div>
<div class="logo-element" style="text-align: center; color: #384C65">
SMS
</div>
</div>
</li>
<li class="nav-item mt-3" [ngClass]="{active: activeRoute('ReleaseNotes')}">
<a class="nav-link" title="ReleaseNotes" [routerLink]="['/ReleaseNotes']" style="color:#faec4c;">
<fa-icon style="padding-right: 5px;" [icon]="faExclamationTriangle"></fa-icon><span class="nav-label"> Release notes</span>
</a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Dashboard')}">
<a class="nav-link" [routerLink]="['/Dashboard']" style="color:greenyellow;">
<fa-icon style="padding-right: 5px;" [icon]="faChartLine"></fa-icon><span class="nav-label"> Dashboard</span>
</a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Agreements')}" *ngIf="globals.userHasAgreementAccess()">
<a class="nav-link" [routerLink]="['/Agreements']"><fa-icon [icon]="faFileSignature"></fa-icon><span class="nav-label"> Agreements</span></a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Appointments')}">
<a class="nav-link" [routerLink]="['/Appointments']"><fa-icon [icon]="faUsersCog"></fa-icon><span class="nav-label"> Appointments</span></a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Attachments')}">
<a class="nav-link" [routerLink]="['/Attachments']"><fa-icon [icon]="faPaperclip"></fa-icon><span class="nav-label"> Attachments</span></a>
</li>
I also shortened the ts file by a couple of lines to save space to show relevant info.
.ts file
import { Component } from '#angular/core';
import {Router} from '#angular/router';
import { GlobalsService } from 'src/app/app.globals.service';
import { faUsersCog, faUser, faCalendarCheck, faChartLine, faAlignJustify,faToolbox, faFileInvoiceDollar, faFileSignature, faPaperclip, faShoppingCart, faExclamationTriangle, faBug} from '#fortawesome/free-solid-svg-icons';
declare var jQuery:any;
#Component({
selector: 'navigation',
templateUrl: 'navigation.template.html',
})
export class NavigationComponent {
faUsersCog=faUsersCog; faUser=faUser;faCalendarCheck=faCalendarCheck;faChartLine=faChartLine;faAlignJustify=faAlignJustify;faToolbox=faToolbox; faShoppingCart=faShoppingCart;
faFileInvoiceDollar=faFileInvoiceDollar;faFileSignature=faFileSignature; faPaperclip=faPaperclip; faExclamationTriangle=faExclamationTriangle; faBug=faBug;
constructor(public globals: GlobalsService,private router: Router) {}
ngAfterViewInit() {
jQuery('#side-menu').metisMenu();
if (jQuery("body").hasClass('fixed-sidebar')) {
jQuery('.sidebar-collapse').slimscroll({
height: '100%'
})
}
}
}

Answer 1

You can conditionally add attributes in Angular, so you could only add the title attribute when the sidebar is collapsed.
<a class="nav-link" [attr.title]="isSidebarCollapsed ? 'Release Notes' : null">
Release notes
</a>
isSidebarCollapsed is a variable that you'll need to create in the NavigationComponent that you will need to set to true when the sidebar is collapsed, and false otherwise.