What is the best way to display link text when the sidebar is collapsed on Angular 9?

Is it possible to have the anchor tag's title attribute, like title="link name", only show up when the navbar is collapsed? I have multiple links in the HTML file but to keep things concise, I've chosen to display only a few.

This is the .html template:


    <nav class="navbar-default navbar-static-side" role="navigation">
      ... (rest of the code)
    </nav>
  

To save space and focus on pertinent information, I've shortened the TypeScript file as well. Here is the relevant part:

.ts file


    import { Component } from '@angular/core';
    
    // (imports and declarations)

    @Component({
      selector: 'navigation',
      templateUrl: 'navigation.template.html',
    })

    export class NavigationComponent {
      // (icon declarations)
      
      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

Angular allows for conditional attribute addition, meaning you can choose to include the title attribute only when the sidebar is collapsed.

<a class="nav-link" [attr.title]="isSidebarCollapsed ? 'Release Notes' : null">
  Release notes
</a>

To make this work, create a variable called isSidebarCollapsed in the NavigationComponent. Set it to true when the sidebar is collapsed, and false otherwise.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with CSS inline styles not applying

I'm currently facing a challenge where I am unable to get an HTML element inline. I understand that using methods like float can solve this issue, but I am curious to know the specific reason why inline is not functioning properly. Check out my JS Fi ...

Insert image using AJAX

I am attempting to use Ajax to dynamically add an <img> element to a div on my webpage. The image's name needs to be fetched from a database. Although I have successfully added the <img> tag to the div and set the correct source (src) att ...

Progress bar arrows undergoing transformation in shape

I am currently developing an angular application where I have implemented a progress bar. The CSS code I have used is: CSS: .progressbar { height: 56px; background: lightgray; box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5); anim ...

Adjust positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: https://hookandbarrelrestaurant.com/ Here is my code: https://codepen.io/Dhaval182/pen/rQPMoW ...

Initial position of the range slider in IONIC 2

I have been searching the web extensively to find a solution to this particular issue. I am working with a range slider and trying to set its default starting values, but so far, I haven't had any luck. I've checked both the official documentatio ...

How can I expand the notification pop-up in R Shiny?

I'm trying to figure out how to expand the notifications in R Shiny because right now they are cutting off longer error messages. Any suggestions? library(shiny) ui <- fluidPage( actionButton("test", "Test") ) server <- f ...

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

Angular asynchronous testing with Observable using karma

I am currently working on testing an asynchronous scenario. Here is a snippet of my component: ngOnInit(private service: MyService) { this.isLoading = true; this.service.getData().subscribe((data) => { this.data = data; this.isLoa ...

How can I extract content nested within another element's id?

Below is the HTML code snippet I am working with: <div id='content'> <div id='price'>$100</div> <div id='another'>something</div> </div> I am able to extract content from the element w ...

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

The functionality of Ionic Cordova is currently inaccessible

Currently utilizing the Ionic Native Calendar plugin in version 3.9.2 of Ionic framework. The module has been successfully installed and included in the app module. Below is the snippet where the calendar is being called: import { Component } from ' ...

Vertically align the content within a div

Here is what I have been working on: http://jsfiddle.net/yisera/2aVpD/ I am trying to vertically center a div inside the .jumbotron-special container. I attempted using display: table; on the parent element and then implementing display:table-cell on th ...

Error in Angular 6: Unable to access the property 'runOutsideAngular' as it is undefined

After creating a nav-bar using the CLI with the following command: ng g @angular/material:material-nav --name=version-nav I imported it into my component as follows: <app-version-nav></app-version-nav> Unfortunately, I encountered this erro ...

Crafting a Javascript Email Event: A Step-by-Step Guide

Currently working on a website design project for a friend who requires a "Contact Us Page". I am utilizing Bootstrap Studio and have successfully created a page where users can enter their name and email. However, I am facing difficulties in configuring ...

Move the scss .map file to a separate directory within Intellij IDEA

I have a specific structure set up in my styles folder within the project directory. It includes three subfolders: css, scss, and css-maps. My goal is to automatically update a corresponding CSS file in the css folder and a .css.map file in the css-maps fo ...

Separate the center icon from its corresponding text

Looking for a solution to center Font Awesome icons vertically while keeping the text aligned separately? Currently, the icons and text are centered together on the page, but I want the icons to be centered vertically and the text to follow independently ...

Enhance your production bundle in Angular CLI 7 by incorporating defer/async attributes

Recently, I have been experiencing some performance issues with a new site built using Angular CLI 7, particularly when accessed through mobile browsers. Upon further investigation, I pinpointed the main cause of the poor performance to be the absence of p ...