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

Encountered a problem with AngularUniversal prerendering: UnhandledPromiseRejectionWarning: Unable to locate NgModule metadata for 'class{}'

Objective The task may seem lengthy, but it's straightforward! Currently, I am utilizing Angular Universal for Server-Side Rendering (SSR) by following a tutorial. The Universal/express-engine has been installed, main.js is generated in the dist/pro ...

javascriptangulartypescriptexpressangular-universal

When invoking a JavaScript method, the context variable 'this' is lost

I have developed a basic pointer to a method like this: export class SmbwaService { getExistingArsByLab(labId: number): Observable<SmwbaAr[]> { this.otherMethod(); } otherMethod(): void { } } let method: (x: number) => ...

javascripttypescript

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

I am looking to import a JSON5 file into a JavaScript object similar to how one can import a JSON file using [import config from '../config.json']. When hovering over, this message is displayed but it's clearly visible. Cannot find module & ...

javascripttypescriptecmascript-6json5

What is the best way to deliver a file in Go if the URL does not correspond to any defined pattern?

I am in the process of developing a Single Page Application using Angular 2 and Go. When it comes to routing in Angular, I have encountered an issue. For example, if I visit http://example.com/, Go serves me the index.html file as intended with this code: ...

angularjsgotypescriptangularservemux

The Angular Button fails to display when all input conditions are met

I'm currently working on validating a form using this link. The requirement is simple - when an input field is invalid, the `save` button should be disabled. Conversely, when all input fields are valid, the `SAVE` button should be enabled/shown. The & ...

angularvalidationtypescripthtml-tableforms

Rx.js struggles to access historical values

Seeking assistance with retrieving the last 3 values emitted. Despite using the provided code to populate uiOrder and invoking cancelOrderItem() multiple times, I am unable to access the last 3 revisions of the order via getHistory(). Instead, I receive th ...

angulartypescriptrxjs5

Angular 13 ModuleWithProviders Bug: A Dilemma Worth Solving

After creating a module and adding a service provider to its forRoot() static method, I imported the module into my app.module.ts file and included it in the imports section as ZooModule.forRoot(). However, when I attempted to inject the service from the Z ...

angular

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Struggling to speed up my Excel sheet creation time, currently taking over 20 seconds. I'm using the code below to compare three arrays and get the desired output: for (let i = 0; i < this.arrayNumberOne[0].length; i++) { let orangeOne = this.a ...

arraystypescripthashmapiteration

What could be causing my TypeScript code to not be recognized as CommonJS?

I rely on a dependency that is transpiled to ES6. My goal is to leverage ES2019 features in my own code. Ultimately, I aim to output ES6. This is how I set up my tsconfig { "compilerOptions": { "module": "CommonJS" ...

javascripttypescriptecmascript-6module

Whenever I am building a React application, I encounter a bug that states: "node:fs:1380 const result = binding.mkdir()"

Whenever I try to enter the command: create-react-app my-app --template typescript I keep encountering this error message: node:fs:1380 const result = binding.mkdir( ^ Error: EPERM: operation not permitted, mkdir 'D:\ ...

javascriptreactjsnode.jstypescriptnpm

Using NextJS: Issue with updating Value in useState

In my current project, I am attempting to display a string that changes when a button is pressed in my NextJs application. Here's the code snippet I am working with: 'use client' import { useState } from 'react' export default fu ...

typescriptnext.jsreact-hooks

Separating HTML content and text from a JSON response for versatile use within various sections of an Angular 2 application using Typescript

Hello there! I am currently utilizing Angular 2 on the frontend with a WordPress REST API backend. I'm receiving a JSON response from the service, however, the WP rest API sends the content with HTML tags and images embedded. I'm having trouble s ...

jsonangulartypescriptangular2-templateangular2-services

"Unindexing data in Angular: A step-by-step guide

Can someone help me figure out how to delete an item by index in Angular? I have a parameter and a remove button, but when I tried putting my parameter inside the remove button it didn't work. How can I fix this? deleteRowFiles(rowIndex: number){ th ...

angulartypescript

Finding the location of a file within a published web component

I am currently working on a webcomponent where I need to include a link tag in the head section and set the href attribute to a folder within a node module. At this stage, during the development of my component, my project structure looks like this: http ...

javascripttypescriptpath

Which is better: Angular 2 dedicated cache service or embedded cache management?

Our current project involves implementing complex cache management logic within various http services such as EmployeeService and DepartmentService. What would be the most optimal choice? Integrating cache logic directly into the model service classes ...

restangularcaching

What can cause a problem with the reduce function that populates an empty object with keys in TypeScript?

I've encountered an issue with a function that is meant to reduce an object. The problem lies in using the reduce method to assign the values of acc[key] as object[key], which is resulting in errors in the code. I am trying to avoid using any specific ...

typescript

Making a quick stop in Istanbul and NYC to collect a few important files

Setting up Istanbul/Nyc/Mocha for test coverage in my project has been a bit of a challenge. While I was successful in running Nyc, I noticed that not all the .ts files in my project were being picked up for test coverage. When I execute npm run coverag ...

node.jstypescriptmocha.jsistanbulnyc

Error: Undefined object trying to access 'vibrate' property

Good day, I apologize for my poor English. I am encountering an issue with Ionic Capacitor while attempting to utilize the Vibration plugin. The documentation lacks detailed information, and when checking the Android Studio terminal, I found the following ...

angulartypescriptionic-frameworkangular-clicapacitor

I'm torn between whether to calculate on the client side for more requests or on the server side for fewer requests. What should I do?

Consider this scenario: I am developing a shopping cart application where I need to store information such as idClient, createdAt, total, and products in each purchase. In addition, I need to apply discounts on the products for each purchase. This is how ...

mysqlnode.jsangularexpresshttp

Utilizing internationalization and next/image in next.config.js alongside TypeScript

Currently, I am in the process of developing a miniature application using TypeScript within NextJS now that support for TypeScript comes standard in Next.js. Additionally, my aim is to integrate two recently introduced features: Image Component and Image ...

typescriptnext.jsnextjs-image