[Angular] Popover 구현하기

ionic 차례

$ ionic g component popoverone

src/app/header/header.component.ts

import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular'
import { PopoveroneComponent } from '../popoverone/popoverone.component'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  constructor(
    public popoveroneController: PopoverController
  ) { }

  ngOnInit() {}

  async popclick(event) {
    const popover = await this.popoveroneController.create({
      component: PopoveroneComponent,
      event
    })
    return await popover.present()
  }

}

src/app/header/header.component.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      HELLO
    </ion-title>

    <ion-buttons (click)="popclick($event)" slot="end">
      <ion-icon ios="ios-notifications" md="md-notifications"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

src/app/popoverone/popover.component.html

<ion-list>
  <ion-item>
    Note One
  </ion-item>
  <ion-item>
    Note Two
  </ion-item>
  <ion-item (click)="close()">
    <ion-label>Close</ion-label>
  </ion-item>
</ion-list>

src/app/popoverone/popover.component.ts

import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular'

@Component({
  selector: 'app-popoverone',
  templateUrl: './popoverone.component.html',
  styleUrls: ['./popoverone.component.scss'],
})
export class PopoveroneComponent implements OnInit {

  constructor(
    public popoverController: PopoverController
  ) { }

  ngOnInit() {} 

  close() {
    this.popoverController.dismiss()
  }  
}

 

src/app/component.module.ts

import { NgModule } from '@angular/core'
import { IonicModule, PopoverController } from '@ionic/angular'
import { HeaderComponent } from './header/header.component'
import { PopoveroneComponent } from './popoverone/popoverone.component'

@NgModule({
    declarations: [HeaderComponent, PopoveroneComponent],
    imports: [IonicModule],
    entryComponents: [PopoveroneComponent],
    exports: [HeaderComponent, PopoveroneComponent]
})
export class ComponentModule{}

 

 

src/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { ComponentModule } from '../components.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

 

 

ionic 차례