Sending template reference from one Angular component to another

I have a main grid component that includes smaller grid-item components. The majority of these grid items navigate to a specific route when clicked. However, there is one particular item that should open a modal window instead of navigating.

Is there a way for me to provide this specific child component with a reference to the template #deactivateDialog?
Currently, I am using @Input route, which sends it as a string, but I actually need to pass the template itself.

Main Grid:

<app-grid-item route="deactivateDialog" (navigationType)="openDialog($event)"></app-grid-item>
//more app-grid-items

<ng-template #deactivateDialog>
  //dialog markup
</ng-template>

openDialog(dialog) {
  //opening dialog
}

Child Component:

<div (click)="navigate()">

@Input() route;
@Output() navigationType = new EventEmitter();

navigate() {
  this.navigationType.emit(this.route);
}

Answer №1

To streamline your code, consider moving the navigation logic to the TypeScript file and passing two arguments to the function:

  1. Determine the route for navigation (except when an item needs to open a dialog)
  2. Specify true or false (true triggers navigation, false opens a dialog)
<ng-template #openDialog>
  //dialog content
</ng-template>

<app-grid-item (click)="navigateOrOpenDialog('destination_route', true)"></app-grid-item>

In your TypeScript file, define navigateOrOpenDialog() function to handle navigation or dialog opening based on the provided arguments.

navigateOrOpenDialog(destinationRoute, shouldNavigate){
  if (shouldNavigate){
    this.router.navigate([destinationRoute]);
  } else {
    // Open dialog
  }
}

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

Execute an Angular factory AJAX request with each change in route

I operate a factory where I utilize a function called getExpenseList that performs an ajax call to fetch data from the expense table. Currently, I have two routes set up - one for listing expenses and another for adding new expenses. However, whenever I n ...

What is the solution for resolving the no-unsafe-any rule?

Currently incorporating TSLint for maintaining the quality of my Angular TypeScript code. I've opted to activate the 'no-unsafe-any' rule from TSLint, as it appears beneficial to avoid making assumptions about properties with type 'any& ...

Error in syntax: An unexpected token was encountered during an AJAX request

I am currently working on a project that involves looping through multiple JSON files within a directory called "trips" and extracting data from each file to display on the front end of the website. However, I'm encountering a persistent error message ...

Using JSF 2.1 for Ajax autocomplete with server search triggered only when user pauses typing

Currently, I am working on developing an autocomplete feature that involves database search based on user input events (specifically onkeyup) in a <h:inputText />. There are two specific preconditions that need to be met for the application to perfo ...

Issue with building Webpack React Router DOM configuration

I recently developed a React+Typescript app with Webpack 5 configuration completely from scratch. Everything was running smoothly in development mode, and I utilized React Router DOM version 6.23.1 for routing. However, once I built the app, some component ...

Combine two streams under certain conditions using RxJs

When working with streams, I am facing a scenario where I have two server calls to make in order to get the required response. However, if the first call returns data, I do not want to execute the second call. I have been struggling to find the proper comb ...

What is the best way to address dynamic meta tags in Angular server-side rendering (SSR

My Angular application uses server side rendering, and I am dynamically loading the meta tags content from the backend. Despite seeing the proper content in the HTML, Facebook's debugger does not seem to recognize the tags. Has anyone else encountered ...

Looking to align the labels of material UI tabs to the left instead of their default center alignment? Here's how

Is there a way to align material ui tab labels to the left instead of center by default? View an image demonstrating center aligned tab labels here ...

What components and substances are needed for a particle system in Three.js?

After spending a few weeks working with particle systems in Three.js, I initially used an Object3D, incorporating my own Vector3s and various materials like MeshBasicMaterials, Phong, and Lambert. However, after discovering the built-in ParticleSystem obje ...

Mapping JSON data from an array with multiple properties

Here is a JSON object that I have: obj = { "api": "1.0.0", "info": { "title": "Events", "version": "v1", "description": "Set of events" }, "topics": { "cust.created.v1": { "subscribe": { ...

How can we ensure that only one of two props is specified during compilation?

I've designed a customized Button component. interface Button { href?: string; action(): void; } I'm looking to ensure that when a consumer uses this Button, they can only pass either href or action as a prop, not both. I want TypeScri ...

What is causing the malfunction in this code? (Regarding the key and value variable objects)

var elements = []; var attribute1 = $(index).attr('class'); //or any string var attribute2 = $(index).html(); //or any string elements.push({ attribute1: attribute2 }); When I run this code, the output I receive is: this Why am I unable to set ...

Using http-proxy-middleware in a React application for browser proxy

I'm having trouble with setting up a proxy in my React app. Scenario: I have two React apps, one running on localhost:3000 and the other on localhost:3001. What I want to achieve is that when I click on: <a href="/app2"> <button> ...

Scale up each image with the use of Java script

I have a main container with three different sub-containers, each containing an image and text. I want to achieve the effect of zooming in on the image of the specific sub-container when hovering over it. Currently, when I hover over any sub-container, all ...

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

I am currently working on an angular 5 project where the homepage consists of several components. One of the components, navbarComponent, includes a dropdown list feature. I want this dropdown list to automatically close when clicked outside of it. Here i ...

Troubleshooting routing errors when deploying Angular 6 on hosting name.com

After loading my Angular 6 application using CLI in a standard hosting service at name.com, I encountered some issues. Here are the steps I followed: Ran 'ng build --prod' command This command generated the dist folder In the root directory of ...

Guide to organizing an HTML table column with a header click using PHP and MySQL

I am currently working on a table that displays data from a MySQL database. I would like to implement functionality that allows users to click on certain columns to sort them in ascending or descending order. However, I am unsure of whether to use PHP, H ...

What steps are involved in making select fields that change dynamically?

There are two fields available for the user to interact with: size and design. Users have the ability to add more instances of these fields as many times as they desire. Illustration: If I choose M for the size, it will display in the console: Furthermo ...

Retrieving the current date in React from a distinct date format

Does anyone know how to retrieve today's date in the following format using React? "2019020420" I have a function that currently retrieves the current date. How can I modify it to output the desired date format shown above? getCurrentDate( ...