কৌণিক 2.0 এবং মডেল ডায়ালগ


128

অ্যাংুলার ২.০ এ একটি কনফার্মেশন মডেল ডায়ালগ কীভাবে করা যায় তার কয়েকটি উদাহরণ অনুসন্ধান করার চেষ্টা করছি। আমি অ্যাংুলার ০.০ এর জন্য বুটস্ট্র্যাপ ডায়ালগটি ব্যবহার করেছি এবং অ্যাঙ্গুলার ২.০ এর জন্য ওয়েবে কোনও উদাহরণ খুঁজে পাচ্ছি না। আমি কোনও ভাগ্য ছাড়াই কৌনিক 2.0 ডক্সও পরীক্ষা করেছিলাম।

অ্যাঙ্গুলার ২.০ সহ বুটস্ট্র্যাপ ডায়ালগটি ব্যবহার করার কোনও উপায় আছে কি?


আমি এই উদাহরণ খুঁজে পেয়েছি। হতে পারে এটি আপনাকে Angularscript.com/angular2-modal-window-with-bootstrap-style
পুয়া সরমিদান

1
আমি এটি আরসি 3 এর সাথে ব্যবহার করছি এবং এটির সাথে সুন্দর সামগ্রী: বীরত্ব
সফটওয়্যার.

@ স্যামকে ধন্যবাদ, আমি একটি ভাল সূচনা পেয়েছি। তবে, আমি লক্ষ্য করেছি যে কলিং উপাদানটি জানে না যে কোন বোতামটি ক্লিক করা হয়েছে। কিছু গবেষণার পরে, আমি আরও মার্জিত সমাধানের জন্য ইভেন্টেমিটারগুলির পরিবর্তে অবজারভেবলগুলি ব্যবহার করতে সক্ষম হয়েছি
জন


@mentat, url আপডেট করা হয়েছে বীরত্ব
আনন্দ রকজ

উত্তর:


199
  • কৌণিক 2 এবং উপরে
  • বুটস্ট্র্যাপ সিএসএস (অ্যানিমেশন সংরক্ষিত)
  • কোন জিকুয়েরি নেই
  • কোনও বুটস্ট্র্যাপ.জেএস নেই
  • কাস্টম মডেল সামগ্রী সমর্থন করে (ঠিক যেমন গৃহীত উত্তর)
  • একে অপরের উপরে একাধিক মডেলের জন্য সমর্থন যোগ করা হয়েছে ।

`

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {
}

@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {

  public visible = false;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

পটভূমিটি দেখানোর জন্য আপনার এই সিএসএসের মতো কিছু দরকার:

.modal {
  background: rgba(0,0,0,0.6);
}

উদাহরণটি এখন একই সাথে একাধিক মডেলের জন্য অনুমতি দেয় । ( onContainerClicked()পদ্ধতিটি দেখুন)।

বুটস্ট্র্যাপ 4 সিএসএস ব্যবহারকারীদের জন্য আপনাকে 1 টি ছোট পরিবর্তন করতে হবে (কারণ একটি সিএসএস শ্রেণির নাম বুটস্ট্র্যাপ 3 থেকে আপডেট করা হয়েছিল)। এই লাইন: এ [ngClass]="{'in': visibleAnimate}"পরিবর্তন করা উচিত: [ngClass]="{'show': visibleAnimate}"

প্রদর্শনের জন্য, এখানে একজন চক্রান্তকারী


যদিও একটি গ্যাচা আছে। বোতামগুলি এখানে অতিরিক্ত উপাদানের অভ্যন্তরে আবৃত থাকায় বুটস্ট্র্যাপ স্টাইলিং বোতামগুলিতে মার্জিন প্রয়োগ করবে না (কমপক্ষে v4 এ)। মোড়ানো মুছে ফেলা div.modal-footerএবং এটি ঠিক .app-modal-footerকরার জন্য পরিবর্তন .modal-footer
অ্যাক্সেল কাহেলার

55

আপনি কীভাবে গিটহাবের অ্যাংুলার 2 অ্যাপের মধ্যে বুটস্ট্র্যাপ মডেলটি ব্যবহার করতে পারেন তার একটি সুন্দর শালীন উদাহরণ ।

এর সংক্ষিপ্তসারটি হ'ল আপনি কোনও উপাদানটিতে বুটস্ট্র্যাপ এইচটিএমএল এবং জকিউয়ের সূচনাটি মোড়ানো করতে পারেন। আমি একটি পুনরায় ব্যবহারযোগ্য modalউপাদান তৈরি করেছি যা আপনাকে একটি টেম্পলেট ভেরিয়েবল ব্যবহার করে একটি ওপেন ট্রিগার করতে দেয়।

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

আপনাকে কেবল এনপিএম প্যাকেজ ইনস্টল করতে হবে এবং আপনার অ্যাপ্লিকেশন মডিউলে মডাল মডিউলটি নিবন্ধভুক্ত করতে হবে:

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({
    imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}

8
বামার - নির্ভরতা হিসাবে jquery উপর নির্ভর করে :(
ব্র্যান্ডো

52
হ্যাঁ, বুটস্ট্র্যাপ এটির উপর নির্ভর করে এবং আমি লাইব্রেরিগুলি পুনরায় লেখার ব্যবসায়ের সাথে নেই।
ডগলাস লডল্লো

2
এটি jQuery ছাড়াই করা যেতে পারে। আমি একটি পরিষেবা এবং সম্পর্কিত মডেল উপাদান লিখতে koscielniak.me/post/2016/03/angular2- কনফার্ম- ডায়ালগ- কম্পোনেন্টে টিউটোরিয়াল সহ স্যামের উত্তরটি ব্যবহার করেছি ।
বিটলজুইস

আপনি যদি আপনার প্রকল্পের বুটস্ট্র্যাপ ব্যবহার না করেন তবে বুটস্ট্র্যাপ সিএসএস-এ লিঙ্ক যুক্ত করতে ভুলবেন না। গিথুব পৃষ্ঠাটি এটি উল্লেখ করতে ভুলে যায়।
শেখর

46

এটি একটি সাধারণ পন্থা যা অ্যাংুলার 2 ব্যতীত jquery বা অন্য কোনও লাইব্রেরির উপর নির্ভর করে না নীচের উপাদানটি (ত্রুটিমাখা.সেটস) অন্য কোনও উপাদানগুলির চাইল্ড ভিউ হিসাবে ব্যবহার করা যেতে পারে। এটি কেবল একটি বুটস্ট্র্যাপ মডেল যা সর্বদা খোলা বা প্রদর্শিত থাকে। এটির দৃশ্যমানতা এনজিআইফের বিবৃতি দ্বারা পরিচালিত হয়।

errorMessage.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-error-message',
    templateUrl: './app/common/errorMessage.html',
})
export class ErrorMessage
{
    private ErrorMsg: string;
    public ErrorMessageIsVisible: boolean;

    showErrorMessage(msg: string)
    {
        this.ErrorMsg = msg;
        this.ErrorMessageIsVisible = true;
    }

    hideErrorMsg()
    {
        this.ErrorMessageIsVisible = false;
    }
}

errorMessage.html

<div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Error</h4>
            </div>
            <div class="modal-body">
                <p>{{ErrorMsg}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="hideErrorMsg()">Close</button>
            </div>
        </div>
    </div>
</div>

এটি পিতামাতার নিয়ন্ত্রণের একটি উদাহরণ (কিছু প্রাসঙ্গিক কোড ব্রেভিটির জন্য বাদ দেওয়া হয়েছে):

parent.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/common';
import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router';
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';


@Component({
    selector: 'app-application-detail',
    templateUrl: './app/permissions/applicationDetail.html',
    directives: [ROUTER_DIRECTIVES, ErrorMessage]  // Note ErrorMessage is a directive
})
export class ApplicationDetail implements OnActivate
{
    @ViewChild(ErrorMessage) errorMsg: ErrorMessage;  // ErrorMessage is a ViewChild



    // yada yada


    onSubmit()
    {
        let result = this.permissionsService.SaveApplication(this.Application).subscribe(x =>
        {
            x.Error = true;
            x.Message = "This is a dummy error message";

            if (x.Error) {
                this.errorMsg.showErrorMessage(x.Message);
            }
            else {
                this.router.navigate(['/applicationsIndex']);
            }
        });
    }

}

parent.html

<app-error-message></app-error-message>
// your html...

3
সুন্দর - ব্যাখ্যা করতে পারেclass="modal fade show in danger"
bensiu

@ বেনসিউ আমি অনুমান করছি যে শ্রেণীর নির্বাচক ব্যবহার করা হয়নি - যতক্ষণ না তাদের কাছে এই সমস্ত শব্দের জন্য সিএসএস স্টাইলের নির্বাচক থাকে যেমন 'ইন'
ড্রেনাই

আপনি এর সাথে কীভাবে ফিড ইন / আউট এফেক্ট পাবেন?
বড় ম্যাকলার্জহিউজ

10

এখন এনপিএম প্যাকেজ হিসাবে উপলব্ধ

কৌণিক-অর্ডারি মোডাল


@ স্টিফেন পল ধারাবাহিকতা ...

  • কৌণিক 2 এবং আপ বুটস্ট্র্যাপ CSS (অ্যানিমেশন সংরক্ষণ করা হয়)
  • কোন জিকুয়েরি নেই
  • কোনও বুটস্ট্র্যাপ.জেএস নেই
  • কাস্টম মডেল সামগ্রী সমর্থন করে
  • একে অপরের উপরে একাধিক মডেলের জন্য সমর্থন।
  • Moduralized
  • মোডাল খোলা থাকলে স্ক্রোলটি অক্ষম করুন
  • নেভিগেট করার সময় মডেল ধ্বংস হয়ে যায়।
  • অলস বিষয়বস্তু সূচনা, ngOnDestroyযখন মডেলটি বের হয় তখন (সম্পাদনা) হয়ে যায়।
  • মডেল দৃশ্যমান হলে পিতামাতার স্ক্রোলিং অক্ষম করা হয়

অলস বিষয়বস্তু সূচনা

কেন?

কিছু ক্ষেত্রে আপনি সম্ভবত এটি বন্ধ করার পরে এর স্থিতি ধরে রাখতে মডেল করতে চাইবেন না, বরং প্রাথমিক অবস্থায় পুনরুদ্ধার করুন।

মূল মডেল ইস্যু

সামগ্রীতে সোজাসুজি দৃশ্যে প্রবেশ করানো আসলে মডেলটি পাওয়ার আগেই এটি সূচনা করে। মডেলটির কাছে এমন একটি সামগ্রী নেই যা কোনও *ngIfর‌্যাপার ব্যবহার করেও মারতে পারে ।

সমাধান

ng-templateng-templateএটি করার আদেশ না দেওয়া পর্যন্ত রেন্ডার করে না।

আমার-component.module.ts

...
imports: [
  ...
  ModalModule
]

আমার-component.ts

<button (click)="reuseModal.open()">Open</button>
<app-modal #reuseModal>
  <ng-template #header></ng-template>
  <ng-template #body>
    <app-my-body-component>
      <!-- This component will be created only when modal is visible and will be destroyed when it's not. -->
    </app-my-body-content>
    <ng-template #footer></ng-template>
</app-modal>

modal.component.ts

export class ModalComponent ... {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;
 ...
}

modal.component.html

<div ... *ngIf="visible">
  ...
  <div class="modal-body">
    ng-container *ngTemplateOutlet="body"></ng-container>
  </div>

তথ্যসূত্র

আমার বলতে হবে যে নেট এর আশেপাশে দুর্দান্ত অফিসিয়াল এবং কমিউনিটি ডকুমেন্টেশন ছাড়া এটি সম্ভব হত না। এটা তোলে সাহায্য করতে পারে তোমাদের মধ্যে এমন কিছু খুব কিভাবে ভালভাবে বুঝতে ng-template, *ngTemplateOutletএবং @ContentChildহবে।

https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesigns system/ ng- content যে সময়টাতে-গোপন-দস্তাবেজ-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in -angular-896b0c689f6e

সম্পূর্ণ অনুলিপি-পেস্ট সমাধান

modal.component.html

<div
  (click)="onContainerClicked($event)"
  class="modal fade"
  tabindex="-1"
  [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
  *ngIf="visible">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-container *ngTemplateOutlet="header"></ng-container>
        <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>
      </div>
      <div class="modal-body">
        <ng-container *ngTemplateOutlet="body"></ng-container>
      </div>
      <div class="modal-footer">
        <ng-container *ngTemplateOutlet="footer"></ng-container>
      </div>
    </div>
  </div>
</div>

modal.component.ts

/**
 * @Stephen Paul https://stackoverflow.com/a/40144809/2013580
 * @zurfyx https://stackoverflow.com/a/46949848/2013580
 */
import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: 'modal.component.html',
  styleUrls: ['modal.component.scss'],
})
export class ModalComponent implements OnDestroy {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;

  public visible = false;
  public visibleAnimate = false;

  ngOnDestroy() {
    // Prevent modal from not executing its closing actions if the user navigated away (for example,
    // through a link).
    this.close();
  }

  open(): void {
    document.body.style.overflow = 'hidden';

    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 200);
  }

  close(): void {
    document.body.style.overflow = 'auto';

    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 100);
  }

  onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.close();
    }
  }
}

modal.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ModalComponent } from './modal.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [ModalComponent],
  declarations: [ModalComponent],
  providers: [],
})
export class ModalModule { }

7

আমি আমার প্রকল্পের জন্য এনজিএক্স-বুটস্ট্র্যাপ ব্যবহার করি।

আপনি এখানে ডেমো খুঁজে পেতে পারেন

গিথুব এখানে আছে

ব্যবহারবিধি:

  1. এনজিএক্স-বুটস্ট্র্যাপ ইনস্টল করুন

  2. আপনার মডিউলটিতে আমদানি করুন

// RECOMMENDED (doesn't work with system.js)
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
  1. সাধারণ স্ট্যাটিক মডেল
<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
   <div class="modal-content">
      <div class="modal-header">
         <h4 class="modal-title pull-left">Static modal</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
         This is static modal, backdrop click will not close it.
         Click <b>&times;</b> to close modal.
      </div>
   </div>
</div>
</div>

4

এখানে আমার মডেল বুটস্ট্র্যাপ কৌণিক 2 উপাদানটির সম্পূর্ণ প্রয়োগ রয়েছে:

আমি ধরে নিয়েছি যে আপনার ট্যাগের নীচে আপনার মূল সূচক। Html ফাইলটিতে ( <html>এবং <body>ট্যাগগুলি) <body>:

  <script src="assets/js/jquery-2.1.1.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

modal.component.ts:

import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';

declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {

    @Input() title:string;
    @Input() showClose:boolean = true;
    @Output() onClose: EventEmitter<any> = new EventEmitter();

    modalEl = null;
    id: string = uniqueId('modal_');

    constructor(private _rootNode: ElementRef) {}

    open() {
        this.modalEl.modal('show');
    }

    close() {
        this.modalEl.modal('hide');
    }

    closeInternal() { // close modal when click on times button in up-right corner
        this.onClose.next(null); // emit event
        this.close();
    }

    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }

    has(selector) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}

let modal_id: number = 0;
export function uniqueId(prefix: string): string {
    return prefix + ++modal_id;
}

modal.html:

<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog"  aria-hidden="true" #thisModal>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }">
                <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <ng-content select="mhead"></ng-content>
                <h4 *ngIf='title' class="modal-title">{{ title }}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>

            <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" >
                <ng-content select="mfoot"></ng-content>
            </div>
        </div>
    </div>
</div>

এবং ক্লায়েন্ট সম্পাদক উপাদান ব্যবহারের উদাহরণ: ক্লায়েন্ট-সম্পাদনা-উপাদান.ts:

import { Component } from '@angular/core';
import { ClientService } from './client.service';
import { Modal } from '../common';

@Component({
  selector: 'client-edit',
  directives: [ Modal ],
  templateUrl: './client-edit.html',
  providers: [ ClientService ]
})
export class ClientEdit {

    _modal = null;

    constructor(private _ClientService: ClientService) {}

    bindModal(modal) {this._modal=modal;}

    open(client) {
        this._modal.open();
        console.log({client});
    }

    close() {
        this._modal.close();
    }

}

ক্লায়েন্ট-edit.html:

<modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }}
    <mhead>Som non-standart title</mhead>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

অবশ্যই শুনব title, showClose, <mhead>এবং <mfoot>ঐচ্ছিক প্যারামিটার / ট্যাগ আরবী।


2
পরিবর্তে bindModal(modal) {this._modal=modal;}, আপনি কৌণিক এর ব্যবহার করতে পারেন ViewChildতাই মত, টীকা: @ViewChild('editModal') _modal: Modal;। এটি পর্দার পিছনে আপনার জন্য বাইন্ডিং পরিচালনা করে।
ডগলাস লুডলো

2

রানটাইম তৈরি হওয়া এএসইউআই ডায়ালগটি পরীক্ষা করে দেখুন। লুকানোর এবং যুক্তি প্রদর্শন করার প্রয়োজন নেই। সহজভাবে সার্ভিসটি এওটি এএসইউআই এনপিএম ব্যবহার করে রানটাইমে একটি উপাদান তৈরি করবে


হাই অরবিন্দ শিবম, দয়া করে পড়ুন: স্ট্যাকওভারফ্লো.com
প্যাং

0

এনজি-উইন্ডোটি ব্যবহার করার চেষ্টা করুন, এটি বিকাশকারীকে একক পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে সহজ উপায়ে, কোনও জকিউরি, কোনও বুটস্ট্র্যাপ না খোলার এবং পুরো নিয়ন্ত্রণের একাধিক উইন্ডোগুলিকে অনুমতি দেয়।

এখানে চিত্র বর্ণনা লিখুন

উপলভ্য কনফিগারেশন

  • উইন্ডো সর্বাধিক করা
  • উইন্ডো ছোট করুন
  • বিশেষ আকার,
  • কাস্টম পোস্ট
  • উইন্ডোটি ড্রাগযোগ্য
  • প্যারেন্ট উইন্ডো ব্লক করুন বা না করুন
  • উইন্ডোটি কেন্দ্র করে নাও
  • উইন্ডোতে রক্ষা মানগুলি
  • Ieldাল উইন্ডো থেকে প্যারেন্ট উইন্ডোতে মানগুলি পাস করুন
  • প্যারেন্ট উইন্ডোতে চিল্ড উইন্ডো বন্ধ করে শুনছি
  • আপনার কাস্টম শ্রোতার সাথে ইভেন্টের আকার পরিবর্তন করতে শুনুন
  • সর্বাধিক আকার বা না দিয়ে খুলুন
  • উইন্ডো আকার পরিবর্তন এবং সক্ষম করুন
  • সর্বাধিক সক্রিয়করণ এবং অক্ষম করুন
  • মিনিমাইজেশন সক্ষম এবং অক্ষম করুন

-1 এটি কীভাবে কার্যকর? এটি ওপি দ্বারা বর্ণিত প্রয়োজনীয়তার কোনওটিকেই সম্বোধন করে না। এটি আপনার চতুর্থ পোস্টে আমি আপনার উত্তরটি ট্রল করতে দেখছি!
এভন

0

কৌণিক 7 + এনগবুটস্ট্র্যাপ

মূল উপাদান থেকে মডেল খোলার এবং এর কাছে ফলাফলটি পাস করার একটি সহজ উপায়। আমি যা চেয়েছিলাম তাই আমি একটি ধাপে ধাপে টিউটোরিয়াল তৈরি করেছি যার মধ্যে স্ক্র্যাচ থেকে একটি নতুন প্রকল্প তৈরি করা, এনজিবুটস্ট্র্যাপ ইনস্টল করা এবং মডালের তৈরি অন্তর্ভুক্ত রয়েছে। আপনি হয় এটি ক্লোন করতে পারেন বা গাইড অনুসরণ করতে পারেন।

আশা করি এটি কৌণিকর ক্ষেত্রে নতুন সহায়তা করবে!

https://github.com/wkaczurba/modal-demo

বিবরণ:

মডেল-সরল টেম্পলেট (মডেল-সরল.কম.পোনাল্ট html):

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Are you sure?</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>You have not finished reading my code. Are you sure you want to close?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('yes')">Yes</button>
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('no')">No</button>
  </div>
</ng-template>

মডেল-সিম্পল ডটকম বিভাগ :.

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal-simple',
  templateUrl: './modal-simple.component.html',
  styleUrls: ['./modal-simple.component.css']
})
export class ModalSimpleComponent implements OnInit {
  @ViewChild('content') content;
  @Output() result : EventEmitter<string> = new EventEmitter();

  constructor(private modalService : NgbModal) { }

  open() {
    this.modalService.open(this.content, {ariaLabelledBy: 'modal-simple-title'})
      .result.then((result) => { console.log(result as string); this.result.emit(result) }, 
        (reason) => { console.log(reason as string); this.result.emit(reason) })
  }

  ngOnInit() {
  }

}

এর ডেমো (app.component.html) - রিটার্ন ইভেন্টের সাথে ডিল করার সহজ উপায়:

<app-modal-simple #mymodal (result)="onModalClose($event)"></app-modal-simple>
<button (click)="mymodal.open()">Open modal</button>

<p>
Result is {{ modalCloseResult }}
</p>

app.componal.ts - মডেল বন্ধ হয়ে গেলে onModalClosed কার্যকর করা হয়:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  modalCloseResult : string;
  title = 'modal-demo';

  onModalClose(reason : string) {
    this.modalCloseResult = reason;
  }    
}

চিয়ার্স

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.