How can I close a modal in Angular 2 using which method?

I am able to successfully open the modal, however, I am unsure if there is a simple way to close it. I looked for a dismiss method on ModalController but encountered errors in the log. The Ionic documentation has not been very helpful in this regard. Can anyone provide guidance on where else I can find information on closing modals?

import { ModalController, ViewController } from 'ionic-angular';

constructor(public modalCtrl: ModalController) {

}

CloseModal() {

   this.modalCtrl.dismiss();

}

Answer №2

Here is the provided solution:

import { ModalController, ViewController } from 'ionic-angular';

constructor(public viewCtrl: ViewController) {

 }

 CloseModal() {
   this.viewCtrl.dismiss();
 }

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

AngularJS Kendo Date Picker: A Simplified Way to Select

Having trouble with formatting dates in my local timezone, the date picker is displaying it incorrectly. Here's an example of the code: input id="logdate" kendo-date-picker="logdate" k-options="logdateOptions" data-ng-model="logFilter.date" k-ng-mode ...

Encountering a domsanitizer issue while trying to initiate Angular 2

Everything was running smoothly with my Angular2 rc 5 project until I restarted my PC and tried to do npm start again. Before the restart, everything was working perfectly. However, when I attempted to start my project again, I encountered the following e ...

Each element in ngFor triggers the invocation of ngAfterContentInit by Angular

In my Angular 11 (Ionic 5) app, I have a scenario with two components: A ContainerComponent and a BoxComponent. Both of these components are completely transparent (template: '<ng-content></ng-content>'). The challenge is for the cont ...

Angular method containing reusable object

I have a simple list where I want to optimize my code by only updating the admin2 object once. The goal is for admin2 to be set equal to (property) Admin2Component.admin2: IAdmin2: In simpler terms, I need to update this admin2 with three different pagina ...

How can I eliminate the hover effect from a div element?

I am facing an issue with implementing a zoom effect on hover for my list of products. When I do a long press on a product, it works the first time but not the second time. I suspect this is because the div remains in a hover state. I want to ensure that ...

The type 'NodeList' does not include the property 'forEach'

Recently, I incorporated ng2-dragula to enable Drag and Drop functionality in my Table. this.dragulaService.drop.subscribe(value => { let questions_group = value[3] as HTMLTableRowElement let SectionTwo:Array<string> = []; l ...

What is the best way to transfer data from a function that is passed from a child component, and then forward it to another

I have a header module with two child modules - one is the search bar and the other is the search list. I am successfully able to pass input from the search bar to the header module using an emit function, but I am unsure of how to further transmit this da ...

In the event that you encounter various version formats during your work

Suppose I have a number in the format Example "1.0.0.0". If I want to increase it to the next version, it would be "1.0.0.1" By using the following regex code snippet, we can achieve this perfect result of incrementing the version to "1.0.0.1": let ver ...

Ways to retrieve or obtain the value of a CSS property in an Angular TypeScript file

Here is some code snippet from different files: <div #sampleComponent class="cdt-sample-component" [ngStyle]="{'height': (view_height) + 'px'}" > <app-component></app-component> </div> css ...

Angular service providing components (TypeScript error)

This is my first time trying to dynamically inject components and so far, I've been successful. However, there's an error in Typescript that's bothering me (I don't like having errors in my code). If you want to check out the app, here ...

Compiling automatically in VS Code when a new file is opened

For the past week or so, I've noticed that when I use ng serve in VS Code, the app recompiles every time I open existing files in the project. In theory, the compile should only happen when I save a file, not just by opening one. Although my team me ...

The module 'AppModule' has encountered an unexpected declaration of 'AnyComponent'

Hi there, I'm currently working with Angular2 and am facing an issue when trying to use two classes in the same Typescript file. During compile time, no errors are shown. However, when attempting to run the page, the console.log displays the followin ...

What allows the type expression to be considered valid with a reduced amount of arguments?

Currently diving into Typescript and focusing on functions in this unit. Check out the following code snippet: type FunctionTypeForArrMap = (value: number, index: number, arr: number[]) => number function map (arr: number[], cb: FunctionTypeForArr ...

Issue TS1127: Incorrect character detected while executing Karma tests in Angular 7

Encountering an issue with error TS1127: Invalid character in the Visual Studio Code terminal while running a Karma test for an Angular 7 app. CLI version - 7.3.9 There is only one Karma test specification in the app. (Removed all auto-generated spec files ...

Angular applications hosted on .Net Core should include a robots.txt file to provide instructions to web

I am currently running a web application on a Windows server, built with Angular 5 for server side rendering and hosted within .Net Core. I recently uploaded a robots.txt file to the root directory of the server, but when attempting to access it via , the ...

The name 'const' is missing or not found

While working on my Angular application, I attempted to utilize the Typescript 3.4 feature known as "const assertion" in the following manner: const counterSettingsDefaults = { setTo: 10, tickSpeed: 200, increment: 1 } as const; Unfortunately, this resul ...

The 'propTypes' property is not found on the 'typeof TextInput' type declaration

Trying my hand at creating a react-native component using Typescript for the first time, but I ran into an issue on line 51: Property 'propTypes' does not exist on type 'typeof TextInput Couldn't find any helpful information on similar ...

When trying to create a Map or OrderedMap in TypeScript with Immutable JS, you may encounter the error message "No overload matches this call."

In my project, I am utilizing Typescript version 3.8.3 alongside <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395054544c4d585b555c790d17091709144b5a17">[email protected]</a>. An issue arises when attempting to ...

Is Angular2 detecting changes based on value equivalence or reference equality?

I am currently working with Angular2-RC.1 and I've noticed a significant decrease in performance when setting up a component with a large dataset. The component I'm using is a tabular one (which involves Handsontable) and it has an Input property ...

In which situations is it required to specify the return type of a function in TypeScript?

When it comes to making functions in typescript, the language can often infer the return type automatically. Take for instance this basic function: function calculateProduct(x: number, y: number) { return x * y; } However, there are scenarios where dec ...