Display or conceal an icon based on the data in the field

Can someone provide guidance on how to make an icon appear or disappear based on the logic within [ngIf]? The icon should only be displayed if there is information in a specific field. Should I implement this inside ngIF or in my TS file? Can the icon class be used for this purpose, or do I need to create a method?

<ng-template [ngIf]="item.valor == null || item.valor.length < 199" [ngIfElse]="segundaParte">
        <div class="detalha" fxFlex="auto" fxFlex.gt-xs="33%" fxFlex.lt-sm="100%" fxFlex.gt-sm="33.3%">
          <h3 tabindex="0" class="item__titulo">{{item.objCampo.label}}</h3>
          <span tabindex="0" class="item__detalhar-conteudo item__detalhar-space">
              <ng-template [ngIf]="item.mascara === 2" [ngIfElse]="valorObjeto">
                  <a href="{{ linkItens(item.valor) }}" class="border-item-detalhe"  matTooltip="Ver processos" matTooltipPosition="right" target="_blank">
                      <span class="item__detalhar-item-valor" [innerHTML]="item.valor | mascarasCampos:item.mascara"></span>
                      <span class="material-icons item__detalhar-icon-detalhe">open_in_new</span> (Icon appears here)
                  </a>
              </ng-template>

              <ng-template #valorObjeto>
                  <span class="item__detalhar-item-valor" [innerHTML]="item.valor | mascarasCampos:item.mascara"></span>

                  <span class="material-icons item__detalhar-icon-detalha"></span>     
              </ng-template>
          </span>
        </div>
      </ng-template>
angulartypescript

Answer №1

You have the option to utilize the hidden attribute in this scenario.

<span 
     class="material-icons item__detail-icon-detail"
     [hidden]="item.value === null" // If the item.value is null, indicating it's empty, it will not be displayed
>
     open_in_new
</span>

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

Understanding the concept of a "class variable" in Typescript when referring to a variable that belongs to another class

When we declare a variable at the class level and assign it the type of another class, such as in the following code: let greeter: Greeter; //line 1 greeter = new Greeter("world"); What is contained within 'greeter' on line 1? ...

typescript

Divide a list Observable into two parts

In my code, I have an Observable called 'allItems$' which fetches an array of Items. The Items[] array looks something like this: [false, false, true, false] My goal is to split the 'allItems$' Observable into two separate Observables ...

javascriptangularrxjsobservable

Trigger @HostListener event after a certain delay

I am currently working on implementing a basic infinite-scroll directive in Angular2. To achieve this, I am utilizing @HostListener('window:scroll') to capture the scroll event and extract the data from the $target. My concern is that every time ...

angularrxjs

How can I utilize a callback in TypeScript when working with interfaces?

Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...

javascripttypescript

Ways to help a child notice when a parent's variable changes

Looking for help with passing data to a child component? Check out this Plunker: http://plnkr.co/edit/G1EgZ6kQh9rMk3MMtRwA?p=preview @Component({ selector: 'my-app', template: ` <input #x /> <br /> <child [value] ...

angulartypescript

Angular 4 has the capability to automatically log out in all tabs when a user logs out in one open tab

I am looking to implement a feature where I automatically log out from all open tabs when logging out from one tab. Currently, I am storing a jwt token in localStorage upon login and removing the token upon logout. Any suggestions on how I can utilize st ...

angularlocal-storagelogout

Troubleshooting issue with React and Material UI Table pagination display

Issue with Material UI Table Display When Changing Pages When receiving an array of Artist Objects through props to create a checklist table, I encounter some display issues. The table works fine initially, but when changing pages or sorting, more rows th ...

reactjstypescriptmaterial-uireact-dom

Importing multiple modules in Typescript is a common practice

I need to include the 'express' module in my app. According to Mozilla's documentation, we should use the following code: import { Application }, * as Express from 'express' However, when using it in TypeScript and VSCode, I enc ...

javascripttypescript

The ngModel feature is not functioning properly when trying to update in tag inputs

I am having trouble with two-way data binding using ngModel in tag-inputs. Can someone please assist me? Here is the link to my code on StackBlitz ...

angular

Transforming a "singular or multiple" array into an array of arrays using TypeScript

What is causing the compilation error in the following code snippet, and how can it be resolved: function f(x: string[] | string[][]): string[][] { return Array.isArray(x[0]) ? x : [x]; } Upon inspection, it appears that the return value will constantly ...

arraystypescript

Transferring information from a child to parent component within Angular using the <router-outlet> component

I currently have the following code in my app.component.html file: <div> <app-login (un)="doSth($event)"></app-login> </div> <router-outlet (un)="doSth($event)"></router-outlet> And in my app.com ...

angularcomponentsparameter-passingeventemitter

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

htmlangulartypescriptiframeangular-router

Retrieving attributes by their names using dots in HTML

Currently working on an Angular 2 website, I am faced with the challenge of displaying data from an object retrieved from the backend. The structure of the object is as follows: { version: 3.0.0, gauges:{ jvm.memory.total.used:{ value: 3546546 }}} The is ...

javascripttypescriptangular

The requirement of the second parameter being optional or required will depend on the value of the first

Is there a way to make the second parameter of my function optional or required based on the value of the first parameter? Here's an example code snippet: enum Endpoint { USERS = '/users/:userId', ORDERS = '/orders' } typ ...

typescript

Creating a local HTML file using node.js: A step-by-step guide

Recently, I've delved into developing games using Typescript. However, I've encountered a bit of an issue when attempting to build my game - it requires running on a server. This limitation prevents me from creating an offline game with Node.js a ...

node.jstypescript

Ways to narrow down const types

For the given scenario, I aim to enforce a specific format [string, number] for all function returns, while allowing varying input arguments for these functions. Access the Playground here type ReturnFormat = [string, number] type Fn = (...args: any[]) =& ...

typescript

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Encountering difficulties with Bootstrap toggle functionality in Angular 2.0 following the establishment of a MEAN stack

While setting up a MEAN stack app following a tutorial, everything was going smoothly until I decided to test some Bootstrap components from their site. After installing Bootstrap in the index.html file for Angular, I noticed that Bootstrap was being loade ...

node.jsangularexpresstwitter-bootstrap-3

Adding a method to an object with TypeScript: A step-by-step guide

In my current scenario, I am faced with a challenge where I need to test a function with a specific use of this. However, typescript poses constraints by either disallowing me from adding the method to the object, or if I define it as any, then my interfac ...

typescript

Creating TypeScript interfaces from Laravel backend

I'm currently exploring ways to automatically generate TypeScript code from the API of my Laravel application. I have been using scribe for generating API documentation and then utilizing it to create TypeScript definitions. However, I am facing an is ...

typescriptlaravelopenapi