[Angular] (mouseover)/(mouseout)イベントで各ボタンの説明を表示

Angularにおけるマウスオーバーイベントについてのメモ

概要

Angularでは(click)イベントと同様に、要素に(mouseover)イベントを定めることで、マウスオーバー時に実行するメソッドを容易に指定できる

  • 書式
    1
    <div (mouseover)="sampleMethod()">

実装例

各ボタンの説明をマウスオーバー時のみ表示する

  • 実現方法

    • 説明を表示したい要素に以下のイベントを設定
      • (mouseover)
      • (mouseout)
    • イベント発生時に状態値を変更
    • ngIfで状態値に応じて説明を表示
  • 実装例

    • [Angular mat-tree] treeの全展開機能機能の実装で実装したボタンのホバー時に説明を表示するように改修
    • (mouseover)時に状態値:showExpandExplanationの値を変更 → ngIfを設定した要素が表示される
      1
      2
      3
      4
      5
      <button mat-icon-button (click)="treeControl.expandAll()" (mouseover)="showExpandExplanation=true" (mouseout)="showExpandExplanation=false"><mat-icon>unfold_more</mat-icon></button><!--全展開ボタン-->
      <div *ngIf="showExpandExplanation">全展開ボタン</div>

      <button mat-icon-button (click)="treeControl.collapseAll()" (mouseover)="showCollapseExplanation=true" (mouseout)="showCollapseExplanation=false"><mat-icon>unfold_less</mat-icon></button><!--全閉ボタン-->
      <div *ngIf="showCollapseExplanation">折り畳みボタン</div>

参考

関連記事

[Angular mat-tree] treeの全展開機能機能の実装

概要

  • 実装したい機能

    • 複数のtreeを一括で展開/折り畳みする機能
  • 実現方法

    • mat-treeにはデフォルトで全展開に利用可能なメソッドが用意されているため、それらを利用する
  • 全展開

    • expandAll() メソッド
  • 全閉

    • collapseAll() メソッド
  • 全展開機能の書式

    1
    tree.treeControl.expandAll();

全展開/全閉ボタンの実装

1
2
3
4
5
<button (click)="tree.treeControl.collapseAll()">collapse All</button>
<button (click)="tree.treeControl.expandAll()">expand All</button>
<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
...
<mat-tree>
  • mat-iconを利用した例
    1
    2
    <button mat-icon-button (click)="treeControl.expandAll()"><mat-icon>unfold_more</mat-icon></button><!--全展開ボタン-->
    <button mat-icon-button (click)="treeControl.collapseAll()"><mat-icon>unfold_less</mat-icon></button><!--全閉ボタン-->

参考

関連記事

その他

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×