Switch up your component button in Angular across various pages

I've created a new feature within a component that includes a toolbar with multiple buttons. Is there a way to customize these buttons for different pages where the component is used?

Component name

<app-toolbar></app-toolbar>

Component.html

   <nav class="navbar">
      <ul class="nav">
        <li class="nav-item btn-upload" routerLinkActive="active" [routerLink]="['/upload']">
          <a class="Mais">
            <img src="assets/mais.svg" />
          </a>
          Upload Files
        </li>
      </ul>
    </nav>

As an example, is it possible to hide the "Upload Files" button and display a different button when this component is on another page, such as the /home page?

angulartypescript

Answer №1

To accomplish this task easily, you can utilize the ngIf directive in your app-toolbar template:

toolbar.component.ts

@Input() displayUploadButton: boolean = false;
@Input() displayOtherButton: boolean = false;

toolbar.component.html

<nav class="navbar">
  <ul class="nav">
    <li *ngIf="displayUploadButton" class="nav-item btn-upload" routerLinkActive="active" [routerLink]="['/upload']">
      <a class="More">
        <img src="assets/more.svg" />
      </a>
      Upload Files
    </li>

    <li *ngIf="displayOtherButton">
      <button>Hello</button>
    </li>
  </ul>
</nav>

component1.component.html

<app-toolbar [displayUploadButton]="true"></app-toolbar>

component2.component.html

<app-toolbar [displayOtherButton]="true"></app-toolbar>

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

tips for preventing issues when the data array is empty

Here is the JSON data that I am dealing with: { "id": 43, "dataEvento": "2022-09-01T00:00:00.000+0000", "dataInvio": null, "idComunicazioneAssociata": null, "certificatoMedico" ...

angulartypescript

Protected members in Angular 2 component templates using TypeScript

Reflecting on ways to incorporate members in a component that can be accessed from the template but not from a parent component sparked my curiosity. In exploring TypeScript visibility in Angular 2, I encountered discussions about "public" and "private" d ...

angulartypescript

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

I am a beginner in Angular 2.0 and I am currently working on creating a sample application using @angular\cli. To serve the application on my local machine, I use the command ng serve --open, which opens it at localhost:4200. Now, I have developed a ...

javascriptangularangular2-services

Error message: Unable to assign value to 'kind' property as it is undefined in Angular Webpack application

Unexpectedly, my Angular application is encountering an error during the build process. TypeError: C:\Users\c\dev\privacy\node_modules\@fortawesome\angular-fontawesome\fesm2020\angular-fontawesome.mjs: Cannot se ...

javascriptangularwebpack

Distinguishing between type assertion of a returned value and defining the return type of a function

What distinguishes between performing a type assertion on a function's return value and explicitly typing the return value in the function signature? Let's consider only simple functions with a single return statement. interface Foo { foo: numbe ...

typescripttypescript-typings

Whenever comparing the types 'string[]' and 'DeliveryTypeEnum', this condition will consistently result in 'true' as there is no intersection between the two. This is highlighted by the error code ts(2367)

Hello everyone, I'm a junior developer and could use some assistance if (query.deliveryType && query.deliveryType != DeliveryTypeEnum.EITHER) { search.push({ terms: { "deliveryType.keyword&q ...

typescriptnext.jsnestjs

RXJS - Trigger a function based on a specific condition being fulfilled by a value emitted from an observable

I have created a search field with autocomplete functionality. By using an observable that monitors changes in the text field, I am able to trigger actions based on user input. this.term.valueChanges .debounceTime(300) .distinctUntilChange ...

javascriptangularreactive-programmingrxjs

Angular - Collaborative HTML format function

In my project, I have a function that sets the CSS class of an element dynamically. This function is used in different components where dynamic CSS needs to be applied. However, every time I make a change to the function, I have to update it in each compo ...

javascriptangulartypescript

Resolving the Duplicate Identifier Issue in Ionic 2 with Firebase Integration

I'm struggling with setting up ionic2 + Firebase 3. Following a tutorial, I installed Firebase and Typings using the commands below: npm install firebase --save npm install -g typings typings install --save firebase However, when I try to run ioni ...

typescriptfirebaseionic2typescript-typings

Issue with Angular 2: Not receiving events when subscribing to a service's Subject property

Presented below is a service: @Injectable() export class AuthService { public reset: Subject<any>; constructor() { this.reset = new Subject(); } public logout() { this.reset.next('logout'); } } Here is an additional s ...

angularrxjs

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

I am currently working on implementing a strategic design pattern. Here is a simple if-else ladder that I have: if(dataKeyinresponse === 'year') { bsd = new Date(moment(new Date(item['key'])).startOf('year&apos ...

javascriptjavadesign-patternstypescriptstrategy-pattern

Encountering issue where the Angular application within the UWP project fails to load the second

I am facing a challenge with integrating my Angular project into a Universal Windows Platform (UWP) application. The Angular code functions flawlessly in the browser, but once incorporated into the UWP bundle, I encounter navigation issues. Technical Stac ...

c#angularuwp

Utilize JavaScript libraries in a TypeScript project

Looking to integrate a payment system called iyzico into my project. The iyzico payment library can be found here. However, there are no types available for it. How can I utilize this library in my Node.js TypeScript Express backend project? I attempted t ...

javascriptnode.jstypescriptexpresstypescript-typings

Steps to insert a personalized attribute into a TypeScript interface

UPDATED EXPLANATION: I'm fairly new to TypeScript, so please bear with me if this question seems basic. I'm working with an existing library (ngx-logger) that I don't want to or can't modify. My goal is to create a service that generat ...

javascriptangulartypescriptngx-logger

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below: <i isSelected class="icon"></i> <i isSelected class="icon"></i> <i isSelected class="icon"></i ...

angulartypescriptangular6angular-directive

Encountering a problem with Webpack SASS build where all files compile successfully, only to be followed by a JavaScript

Being a newcomer to webpack, I am currently using it to package an Angular 2 web application. However, I am encountering errors related to SASS compilation and the ExtractTextPlugin while working on my project. Here is a snippet from my webpack configurat ...

angulartypescriptsasswebpack

struggling to implement dynamic reactive forms with Angular

Currently, I am experimenting with building a dynamic reactive form using Angular. While I have successfully implemented the looping functionality, I am facing some challenges in displaying it the way I want. <form [formGroup]="registerForm" (ngSubmit) ...

angulartypescript

Encountering an issue accessing a property retrieved from a fetch request in TypeScript

I am currently dealing with the property success defined in the API (reCAPTCHA). /** * The structure of response from the veirfy API is * { * "success": true|false, * "challenge_ts": timestamp, // timestamp of the challen ...

jsontypescriptnext.jsrecaptcha

Typescript, creating multiple definitions for a function with an object parameter

My dilemma lies in a function that takes an argument object and returns another object. This returned object will have a "bar" key based on the presence of the "includeBar" key as an option. I attempted to handle this scenario with different overloads: int ...

typescript

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

I am currently working with Angular1 using TypeScript and I have a question that needs some clarification. Within the environment that I am operating in, is there a method available to encode and decode a string in base64? Despite conducting extensive re ...

angularjsencodingtypescriptbase64decoding