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

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

What are the steps to include a string into Vue and then assess its value?

Where should I define a function in a SPA using the options API that will be called from an HTML href? Check out this demo on Codepen where everything works fine: CODEPEN However, when I try to implement it in my single-page application: <templat ...

Ways to merge several getServerSideProps functions

Within my project, I have two important pages: index.js and other.js. In index.js, there exists a crucial method known as getServerSideProps: export async function getServerSideProps(context) { //code here } The challenge arises when I realize that I ...

Where the package.json file resides

Is there a designated location for the package.json file in a project, like within the project directory? Where should the package.json file be located in a multi-component project? What is the significance of having version 0.0.0 in th ...

I am having trouble getting the unix timestamp to work with Meteor's API, pickadate.js

Based on the information from the API at , I have implemented the following code to retrieve a Unix timestamp based on a selected date. Initially, I configured: $('.startDate').pickadate({ selectMonths: true, selectYears: 15 ...

How to manually trigger the ajaxLoader feature in Tabulator version 3.5

Currently, I am working with version 3.5 of Tabulator from . When populating the table using an ajax request, a "loading icon" is displayed during the loading process. Prior to executing the ajax request for Tabulator, I perform some preliminary check op ...

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar. Despite trying various solutions from Stack Overflow, I still haven't found one that works for me. Therefore, I am rea ...

Finding clarity amidst the chaos of require and export in Express.js (Node.js)

Is there a way to make my socket.io connection modular so that it can run once and be accessible anywhere? How can I export it? var server = require("http").Server(express); var io = require("socket.io")(server); server.listen(5000); io.on('connect ...

I need to figure out a way to validate form data dynamically as the number of fields constantly changes. My form data is being sent via Ajax

Click validation is desired. It is requested that before transmitting data, the validate function should be executed. If there is an empty field, a message should be displayed and the data should not be sent to the PHP file. In case there are no empty fi ...

Axios: Exception handling does not involve entering the catch method

Implementing a function to adjust a contract name involves making an axios request to the backend API using a specific ID. Upon each execution, a sweetalert prompt is displayed. axios({ url: '/api/contract/' + id, method: 'put ...

Employing Multer and Express in conjunction with TypeScript

Overview Currently, I am working on a project that involves creating a user-friendly website where individuals can easily upload images. For this particular task, I have employed Node.js, React, Multer, and Typescript. Issue at Hand app.post('/admi ...

Struggling to successfully pass a function as an argument to the setTimeout method within an array in node.js using TypeScript

Here is an example that successfully demonstrates a function being called using setTimeout: function displayMessage(msg: string){ console.log(msg); } setTimeout(displayMessage, 1000, ["Hi!"]; After one second, it will print out "Hi!" to the console. ...

combination of Electron, Node.js, and Angular

Can I integrate Angular 5 into an Electron project and have Node.js run on the server side as well? While I understand Electron allows for desktop applications, I am curious if it can also support server-side applications. Additionally, I am unsure if it ...

Trouble accessing environment variables within a React application, specifically when using webpack's DefinePlugin in a Dockerfile

I can't figure out why console.log is printing undefined. The files Makefile, config.env, webpack.config.js, and package.json are all located in the root of my project. Makefile: docker-run: docker docker run -it --env-file config.env -p "80:80" ...

Display the number of rows per page on the pagination system

Looking for a way to add a show per page dropdown button to my existing pagination code from Mui. Here's the snippet: <Pagination style={{ marginLeft: "auto", marginTop: 20, display: "inline-b ...

Steps for customizing the dropdown arrow background color in react-native-material-dropdown-v2-fixed

Currently, I am utilizing react-native-material-dropdown-v2-fixed and I am looking to modify the background color of the dropdown arrow. Is there a way for me to change its color? It is currently displaying as dark gray. https://i.stack.imgur.com/JKy97.pn ...

If the first <select> option is chosen, then a second <select> validation is necessary

Is it possible to make the second selection required for validation only if the 'yes' option is selected in the first one? <div class="form-group" ng-class="{ 'has-error' : articleEditForm.pnp.$invalid && !articleEditForm.pn ...

What is the reason the 'Add' type does not meet the 'number' constraint?

I experimented with type gymnastics using Typescript, focusing on implementing mathematical operations with numeric literals. First, I created the BuildArray type: type BuildArray< Length extends number, Ele = unknown, Arr extends unknown ...

Troubleshooting a Docker EPERM issue while attempting to compile an Angular application within a container

Our team is currently in the process of containerizing our existing stack using Docker and Docker Compose. This is a simplified version of our Docker Compose file with the relevant services: version: '3.8' services: #FO angularproject: c ...

Troubleshooting ion-radio loop error in Ionic 2

I am encountering an issue with the ion-radio component in Ionic 2. The problem is that when the component retrieves data from a service using HTTP and assigns it to the data property within the ngOnInit lifecycle hook, the radio buttons are not able to b ...