Angular2 Interactive Modal Pop Up

Here is an example of a modal in HTML code:

<app-modal #modal1>
                <div class="app-modal-header">
                    header
                </div>
                <div class="app-modal-body">
                    You can add any content you like here, such as form fields.
                    <input type="text">
                </div>
                <div class="app-modal-footer">
                    <button type="button" class="btn btn-default" (click)="modal1.hide()">Close</button>
                    <button type="button" class="btn btn-default" (click)="modal2.show()">Show modal 2</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </app-modal>

I would like to display this modal when a tab is clicked. How can I show or hide this modal from a TypeScript file using a method?

angulartypescript

Answer №1

import {ViewChild} from '@angular/core';

@Component({
// necessary boilerplate code
}) 
export default class {
  @ViewChild('modal1') modal1; // pointing to the element with ID 'modal1' in the template.

 showPopup() {
   this.modal1.show();
 }
}

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

Angular's queryParams do not appear to properly connect with the query parameters

My code seems to have a mistake somewhere, but I can't figure it out. In my [queryParams] = "{allowEdit: server.id == 3 ? 1 : 0}", the params object is empty when I subscribe to it in the edit-server component. Why is it empty and how do I a ...

angulartypescriptfrontend

The absence of a 'body' argument in the send() json() method within the Next.js API, coupled with TypeScript, raises an important argument

Currently, I have set up an API route within Next.js. Within the 'api' directory, my 'file.tsx' consists of the following code: import type { NextApiRequest, NextApiResponse } from "next"; const someFunction = (req: NextApiReq ...

typescriptnext.jstypeerrorsend

Error: The plugin "videoJsResolutionSwitcher" could not be located on AngularCli platform

Unable to recognize VideoJs-Resolution-Switcher as a Plugin! Issues: - Angular2 - Unable to find plugin: videoJsResolutionSwitcher - player.updateSrc is not a function Library Information: - videojs: https://github.com/videojs/video.js/ - vi ...

angularpluginsangular-clivideo.js

Utilizing Sequelize's multiple operators for fetching objects with an exclusion clause: A comprehensive guide

In my NodeJS/Express/Angular7 application with Sequelize 5 and MySQL, I have a table of images connected to a table of keywords through a join table in a bidirectional hasMany relationship. My goal is to retrieve all images that contain keyword IDs within ...

mysqlnode.jsangularexpresssequelize.js

What is the method for defining functions that accept two different object types in Typescript?

After encountering the same issue multiple times, I've decided it's time to address it: How can functions that accept two different object types be defined in Typescript? I've referred to https://www.typescriptlang.org/docs/handbook/unions ...

javascripttypescript

Error: useRef in TypeScript - cannot be assigned to LegacyRef<HTMLDivElement> type

Struggling to implement useRef in TypeScript and facing challenges. When using my RefObject, I need to access its property current like so: node.current. I've experimented with the following approaches: const node: RefObject<HTMLElement> = us ...

reactjstypescripttsx

Diagnosing issues with the socket.io event system in a Node.js backend and Angular frontend

To establish a basic event system within my Node backend for notifying clients (Angular application) of specific events (such as when a user changes their profile photo), I am utilizing the socket.io library in the backend and its corresponding 'ngx-s ...

node.jsangularsocket.io

Trouble encountered when utilizing [ngClass] - Error occurred due to changes in expression after it has been checked

I keep encountering an error when attempting to utilize [ngClass] in my Angular project. The specific error message I receive is as follows: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ' ...

angulartypescriptdata-bindingangular7

Discovering the Object with the Lowest Key Value in Typescript

Within my TypeScript code, I have defined a List as myList: Package[]. The structure of the Package model is outlined below - export class Package { ID: Number; Price: Number; } I am trying to retrieve a Package object with the lowest Price value using ...

angulartypescript

express-typescript-react: The frontend bundle file could not be located (404 error)

Currently, I am in the process of developing a full stack application that utilizes Express (written in Typescript) and React. One key component of my development setup is webpack, which I'm using to bundle both the backend and frontend parts of the a ...

reactjstypescriptexpresswebpack

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

javascripthtmlreactjstypescriptnext.js

Configuring a server-side rendered Angular application on Plesk hosting platform

After successfully setting up server side rendering in my Angular app using nguniversal on my local machine, I am now facing the challenge of implementing this on a remote server with Plesk. In my local environment, I can serve the files by running: npm r ...

node.jsangularserver-side-renderingpleskangular-universal

Searching with Mat-autocomplete across multiple fields simultaneously

I am struggling with a mat-autocomplete that contains 5000 objects, each consisting of a first name and a last name. My goal is to search for both the first name and last name simultaneously regardless of the input order. Currently, I can only search one ...

angularangular-material

Tips for implementing 'transloco' on the 'pie-chart' component in an Angular project

Below is the code snippet: .HTML: <div fxFlex> <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single0" ...

angularchartstransloco

What is the best way to run ng test for all components within a sub module of an Angular application?

In my Angular application, I have defined the app module as follows: app.module.ts export class AppModule {} I am able to execute tests using ng test MyApp Within this application, I also have multiple modules set up like so: my-one.module.ts / my-oth ...

angularangular-clikarma-runner

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

I recently started working with TypeScript and encountered a problem during nextjs build. While the code runs smoothly in my browser, executing nextjs build results in the error shown below. I attempted various solutions found online but none have worked s ...

reactjstypescriptnext.jsreact-typescript

What is the proper way to utilize the ES6 import feature when using a symbolic path to reference the source file?

I am seeking a deeper understanding of the ES6 import function and could use some assistance. The Situation Imagine that I have a portion of code in my application that is frequently used, so I organize all of it into a folder for convenience. Now, in t ...

javascripttypescriptimportecmascript-6ecma

Tips for enforcing a mandatory type with TypeScript

Creating a custom type called InputType with optional properties like this: export type InputType = { configJsonUrl?: string; configJsObject?: DataType; rawData?: { [key: string]: string }; action?: () => void; }; export type DataType = { id ...

typescript

Navigating to a webpage using a dropdown menu selection and a button press

I'm new to Angular and wondering if it's possible to select an option from a dropdown menu and then be redirected to a specific page based on that selection <mat-label >Login As</mat-label> <mat-select> ...

htmlangularangular-material

The error message states that the property 'registerUser' is not found on the class 'UserController'

In the controller file, I exported two functions (registerUser and loginUser) as default. No errors were thrown at that stage, but when attempting to access the routes, an error occurred stating - Property 'registerUser' does not exist on type &a ...

node.jstypescriptexpress