Angularのカレンダー | Advent Calendar 2021 - Qiita
アプリケーションフレームワークであるAngularのアドベントカレンダーです！ Angularの知見や制作物などの記事をお待ちしております！ Angular Advent Calendar 2020 - Qiita Angular Advent Calendar 2019 - Qiita Angular #2 Advent Calendar 2019 - Qiita Angular Advent Calendar 2018 - Qiita Angular Advent Calendar 2017 - Qiita edit_calendarHow to join the calendarYou can join the calendar by selecting an available date and registering the URL of the article you wish
Angular formのvalidation - Qiita
Angular Formのカスタムバリデーション Postal Code、電話番号でたまに使用するカスタムバリデーションの作成のtips 単一のCustom Validator 複数のカスタムValidatior 複数のカスタムValidatorをDirective化 参考 angular/angular 環境 angular-cli 7.0.x 0.通常のValidation FormModuleのValidatorsをimportし、FormControlの2つめのParameterにValidationをいれる。 StackBlitz import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/f
Angular で変換確定前に input の値を得たい時は COMPOSITION_BUFFER_MODE - Qiita
やりたいことと方法を手短に Google の検索欄って、変換を確定する前から検索してくれて便利ですよね。 Angular でこのように変換確定前の入力値を使いたいときには COMPOSITION_BUFFER_MODE が役に立ちます。モジュールやコンポーネントの providers で COMPOSITION_BUFFER_MODE を false にすれば、 IME の変換が確定していなくても input の入力値がモデルに反映されます。 デモページ ソース 詳しい説明 入力された文字を表示するだけの簡単なコードを考えます。 これを PC のブラウザで操作すると、変換を確定するまで入力した文字が表示されないはずです。なぜこのような動作になるかというと、 Angular が変換が確定するまでモデルに入力値を反映させていないからです。具体的な処理は DefaultValueAccessor
Angular Component Dev Kit 入門
はじめに 何やかんやでAngularネタを書くのはわりと久しぶりです。 長らくbetaだったAngular MaterialもいよいよRCを迎えています。 今日は、Angular MaterialのサブプロジェクトであるAngular Component Dev Kit（以下CDK）について簡単に紹介していきます。 CDKを学ぶべき理由 Angular Materialのステータスアップデート にもあるとおり、 CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。 CDKはUIライブラリ開発にありがちな機能を、コンポーネント開発基盤としてまとめたパッケージです。 「CSSをデザイナが提供してくれる
[Angular] ngComponentOutlet を使ってタブを実装する - Qiita
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] ngComponentOutlet を使ってタブを実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0b866b43366b25df302f6c30424b97db9a53d47/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTkzMzQyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTAwODg4MTU5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdkM2Q3MzZlZDRkOWEyOThkYmM1YzQ3NmYzNmI1MzFh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df6ef6496ea559ea2ba01a9233a5c9b84%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMG5nQ29tcG9uZW50T3V0bGV0JTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgyJUJGJUUzJTgzJTk2JUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NzA5OWQxOGMyZGVlM2EyODE2OGY2Njg0MWI2YjkxNjQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmMDNkNmIxNjdmOWNjYjdjYTFiYzcxMjgwODFjOGE4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D86673305176dc103d41f928738f5a29e)
Angularから@ngrx/dataとActiveRecordを使ってRDBにアクセスする（追記あり） - Qiita
１ はじめに この記事は Angular #2 Advent Calendar 2019 6日目の記事です。 下記モジュールをRel 9.x に変更しました。 Angular,AngularMaterial,NgRx,flex-layout スターアプリケーションズ株式会社の吉田文雄です。Angularからデータベースにアクセスする話だと、FirebaseとかGraphQLの話題が多いようですが、昨今NoSQLからRDBに回帰する動きもあり、リレーショナルデータベースに挑戦してみました。ただ、AngularからSQL文をゴリゴリ書くのは、少しつらいところもあり、ActiveRecordを挟む構成とします。また2019年の夏に、リアクティブプログラミングのNgRx8.0がリリースされた際、@ngrx/dataというモジュールも一緒にリリースされました。この機能を使うことによりデータを一方向で
StackBlitz で Angular のオンラインデモ環境を爆速で用意する - Qiita
この記事は Angular Advent Calendar 2017 の14日目の記事です。 StackBlitz とは StackBlitz とは、簡単に言うと、オンラインの VS Code です。少し前に Medium で紹介されて注目を集めています。 Angular と React 用のプロジェクトを作れるとのことで、早速使ってみました（もちろん Angular で）。良い点、悪い点を挙げてみたいと思います。 良い点 Angular CLI ベースのプロジェクトを速攻で開始できる 上記の画像で Angular をクリックすれば、ものの数秒で開始できます。 Angular CLI の generate 系コマンドを GUI 操作できる 左ペインの app フォルダで右クリックすると、下図のように、コンポーネントやモジュールなどの生成コマンドがコンテキストメニューに表示されます。 パッケ
Angular で超簡単に画面の自動スクロールを実装する方法 - Qiita
概要 Angular で画面スクロールを実現する方法（いわゆる、画面内アンカーにジャンプする動き） 静的 HTML コンテンツにおいて、画面内スクロールはよく使われる機能だが、Angular はブラウザが要素を探すタイミングが Router によるコンポーネント生成より早いためうまくいかなかった。 スクロールを無理やり実現しようと思ったら、ディレクティブとか頑張ってイジったり、別ライブラリ入れたりと苦労する。 しかし、v6.1 から導入された Router Scroller という機能でスクロールが超簡単に実現できるようになったため、その実装方法の備忘録。 ただし、ヌルヌルっと動くようなアニメーション動作の実装は説明していない。あくまで目的の位置をパッと表示するスクロール処理に関する内容となっている。 前提条件 Angular バージョン 6.1.0 以降のみ対応 RouterModule
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular: No component factory found for ~. Did you add it to @NgModule.entryComponents? - Qiita
[Windows] Dockerを使用してホスト環境を汚さずにAngularの開発環境を構築する - Qiita![[Windows] Dockerを使用してホスト環境を汚さずにAngularの開発環境を構築する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/89c19a10986ec93b3743ff6f012b9248b9d3c15e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTE2NzIlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODIxMDQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWZlZjFjMGM5MDJhNGM3OTJjNjE1ZjY3NjE4MmJmNDU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dd2a71f942088ca4905f99f128a6f3bab%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2luZG93cyU1RCUyMERvY2tlciVFMyU4MiU5MiVFNCVCRCVCRiVFNyU5NCVBOCVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MyU5QiVFMyU4MiVCOSVFMyU4MyU4OCVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MiU5MiVFNiVCMSU5QSVFMyU4MSU5NSVFMyU4MSU5QSVFMyU4MSVBQkFuZ3VsYXIlRTMlODElQUUlRTklOTYlOEIlRTclOTklQkElRTclOTIlQjAlRTUlQTIlODMlRTMlODIlOTIlRTYlQTclOEIlRTclQUYlODklRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz02YzhhNDY0ZGRmMmE0ZDljZThlZGNmMTQ3MzFhMDY2NQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBNZWdhQmxhY2tMYWJlbCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTA5YjA0NzM1Zjk5ODAyMWMxMGJlM2VmZDQzY2RkN2Mz%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd4ac368714901e08181b1bf16556ab5d)
CDK Overlay でdetach したときもアニメーションしたい！ - Qiita
Angular Material に追加された google-maps を使ってみた - Qiita
Angular 親コンポーネントから子コンポーネントにデータの渡し方 - Qiita
Angularの便利タグng-container, ng-content, ng-template - Qiita
Angular+Cognitoのユーザー認証にGuardを使う - Qiita