javascript - how to add alertify angular11

Question

I just want to make a simple alert, I found a few solutions with angular 11 and alertjs, but it is quite old and wants to solve my problem through services, can I solve this without using services? or what's my mistake here? angular.json

 "styles": [
          "src/styles.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/font-awesome/css/font-awesome.min.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

component.ts

  import {
    Component,
    OnInit
  } from '@angular/core';
  import { Product } from './product';
  declare let alertify:any;
  @Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
  })
  export class ProductComponent implements OnInit {

    constructor() {}
    title = "ürün Listesi"
    filterText=""
    products: Product[] = [{
        id: 1,
        name: "Laptop",
        price: 15,
        categoryId: 1,
        description: "Asus Zenbook",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 2,
        name: "Mouse",
        price: 25,
        categoryId: 2,
        description: "A4Tech",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 1,
        name: "Laptop",
        price: 15,
        categoryId: 1,
        description: "Asus Zenbook",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 2,
        name: "Mouse",
        price: 25,
        categoryId: 2,
        description: "A4Tech",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 1,
        name: "Laptop",
        price: 15,
        categoryId: 1,
        description: "Asus Zenbook",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 2,
        name: "Mouse",
        price: 25,
        categoryId: 2,
        description: "A4Tech",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 1,
        name: "Laptop",
        price: 15,
        categoryId: 1,
        description: "Asus Zenbook",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 2,
        name: "Mouse",
        price: 25,
        categoryId: 2,
        description: "A4Tech",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 1,
        name: "Laptop",
        price: 15,
        categoryId: 1,
        description: "Asus Zenbook",
        imageUrl: "https://picsum.photos/200/100"
      }, {
        id: 2,
        name: "Mouse",
        price: 25,
        categoryId: 2,
        description: "A4Tech",
        imageUrl: "https://picsum.photos/200/100"
      },

    ];
    emptyProducts = "ürün Listesi bo?"

    ngOnInit(): void {}

    addToCart(product:any){
      alertify.succes("added")
    }

  }

<h3 *ngIf="products; else:noProducts">{{title}}</h3>
<ng-template #noProducts>
  <div class="alert alert-danger" role="alert">
    {{emptyProducts}}
  </div>
</ng-template>
<div class="mb-3">
  <input  [(ngModel)]="filterText" class="form-control" id="productName" placeholder="Arama metnini giriniz">
  <div id="text" class="form-text" *ngIf="filterText;else:noText">?uan <span>{{filterText}} arad?n?z</span></div>
</div>

<ng-template #noText>

</ng-template>
<div class="row">
  <div *ngFor="let item of products | productFilter:filterText" class="card" style="width: 18rem;">
    <div class="card-body">
      <img [src]="item.imageUrl" class="card-img-top" alt="{{item.name}}">
      <h5 class="card-title">{{item.name | uppercase}} {{item.price| currency:"TRY":"TL":""}} </h5>
      <p class="card-text">{{item.description}}</p>
      <a (click)="addToCart(item)" class="btn btn-primary">Sepete Ekle</a>
    </div>
  </div>

</div>

Answer 1

等待大神答复