Creating an Angular Confirm feature using the craftpip library

Trying to utilize the angular-confirm library, but finding its documentation unclear. Implementing it as shown below:

Library -

In button click (login.component.ts),

ButtonOnClickHandler() {
angular.module('myApp', ['cp.ngConfirm'])
  .controller('myController', function($scope, $ngConfirm){
    $scope.hey = 'Hello there!';
    $ngConfirm({
      title: 'What is up?',
      content: 'Here goes a little content, <strong>{{hey}}</strong>',
      contentUrl: 'template.html', // if contentUrl is provided, 'content' is ignored.
      scope: $scope,
      buttons: {
        // long hand button definition
        ok: {
          text: 'ok!',
          btnClass: 'btn-primary',
          keys: ['enter'], // will trigger when enter is pressed
          action: function(scope) {
            $ngConfirm('the user clicked ok');
          }
        },
        // short hand button definition
        close: function(scope){
          $ngConfirm('the user clicked close');
        },
      },
    });
  });
}

Resulting in the following error popup,

https://i.sstatic.net/PXc8k.png

Been searching for examples of successful implementations without luck. Any assistance in resolving this issue would be greatly appreciated!

Answer №1

If you're working on an Angular project, keep in mind that this library is specifically designed for AngularJs, which came before Angular. For your project, consider exploring options like angular-confirmation-popover or similar libraries tailored for Angular.

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

"Manipulating values in an array with a union type: a guide to setting and

I am currently working on creating an array that can have two different value types: type Loading = { loading: true } type Loaded = { loading: false, date: string, value: number, } type Items = Loading | Loaded const items: Items[] = ...

Having troubles with *ngFor in Angular 8? Learn how to use ng-template effectively

I need assistance creating a table with dynamically generated columns and using the PrimeNg library for the grid. Despite asking several questions, I have not received any responses. Can someone please help me achieve this? To generate table column heade ...

Error encountered with Angular Static Injector Provider when extending another injectable component

I am currently working on an API based service setup that is structured as follows: @Injectable() export class ApiBaseService { constructor( private http: HttpClient, _configuration: ConfigurationService ) { this.apiUrl = _ ...

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

I am currently in the process of developing an electron app that enables users to cut and rearrange multiple audio samples while seamlessly playing them back. The combined duration of these samples can exceed an hour, making it impossible to decode and sto ...

The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

Sample Typescript Code: I am experiencing issues with my code and cannot comprehend this error message- Argument of type '{ src: string; thumb: string; }' is not assignable to parameter of type 'never' _albums = []; constructor( ...

Typescript Syntax for Inferring Types based on kind

I'm struggling to write proper TypeScript syntax for strict type inference in the following scenarios: Ensuring that the compiler correctly reports any missing switch/case options Confirming that the returned value matches the input kind by type typ ...

Guide on sending JSON object to Angular custom components

I have implemented a custom element in Angular 7 using the CUSTOM_ELEMENTS_SCHEMA. My app.module.ts code is as follows: export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { this.registerCustomElements( ...

Patience is key until Angular completes loading the issue

I have been experimenting with a similar method to the one Salim shared in this post Testing AngularJS with Selenium However, every time I run it, the script consistently waits for the "webdriver wait" period. It seems like the boolean check always retur ...

Ways to define an interface that can accommodate various interfaces with a specific structure

I am in need of a function that can accept a parameter with interfaces having a specific structure. The parameter should be either a string hash or a string hash along with an attribute string hash, as shown below: { anotherHash: { a: 'a', ...

What is the best way to display just one record that has the lowest score out of all the records?

I need help with displaying only 1 record from the DL list that has the lowest score, instead of showing all records. In the example on stackblitz, you can see that for the first record, the DL scores are: 54, 20, and updated. Instead of displaying all 3 ...

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Currently, I am grappling with a dilemma. In my API documentation, I need to include a 'type' in an @ApiProperty for Swagger. Unfortunately, Swagger seems to be rejecting it and no matter how many websites I scour for solutions, I come up empty-h ...

Why Does Angular's ngIf Always Result in a Negation to True?

Can someone please clarify this for me? I'm having trouble understanding why the *ngIf condition and else statement always evaluate to true unless I am completely mistaken. Here is the situation: I have an icon that should turn the background color t ...

Clearing the Angular cache is necessary every time new changes are added to production mode

Currently, I am working with angular 9.0.3 and after making some new changes, I upload it to Cpanel and compile using the following command: ng build --prod --aot --outputHashing=all --extractCss=true. However, once uploaded, if I visit the website and en ...

Angular 7 and Express: No content returned in response body after making a POST request

I am encountering an issue with retrieving the response from a POST request in Angular 7. When I set the API to return "text," everything works as expected. However, when I change the response to JSON, the response body in Angular appears to be null. Test ...

Should data objects be loaded from backend API all at once or individually for each object?

Imagine having a form used to modify customer information. This form includes various input fields as well as multiple dropdown lists for fields such as country, category, and status. Each dropdown list requires data from the backend in order to populate i ...

Is it possible for Typescript and Next.js to import a different project's *source code* only from the module's root directory?

Issue with Sharing React Components between Closed and Open Source Next.js Projects I am facing a challenge in my development setup involving two Next.js projects, one closed source (Project A) and the other open source (Project B). In Project A, which is ...

ErrorHookWebpack: When executing npm build in the node container, the service is detected as inactive

Encountering an issue when executing npm run build within a container on Kubernetes during a gitlab-ci job. It's worth noting that npm install, npm run lint, and npm run test all completed without any problems. Error: node@runner-7gbsh-sz-project-966 ...

Most effective method for sending an HTTP Post request with a JSON body in Angular 9

Hi there, I'm currently working on a project that requires saving information from 3 text box fields. I've been struggling to figure out how to make a POST request with a JSON body. Here's what I have so far: I've been piecing together ...

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

Using Datatable.net with Angular 6 for Change Monitoring

I've been encountering several issues with the custom datatable component that I created. One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features st ...