Ugo

Webエンジニアのためのプログラミング情報サイト

  • Angular 14のアップデートを解説！スタンドアロンコンポーネントとフォームのタイプ指定。

Angular 14のアップデートを解説！スタンドアロンコンポーネントとフォームのタイプ指定。

Angular 14のアップデートを解説！スタンドアロンコンポーネントとフォームのタイプ指定。

2022年6月2日にAngularのバージョン14がリリースされた！

https://twitter.com/angular/status/1532436173624418304

この記事では、主な新機能である「スタンドアロン・コンポーネント」と「リアクティブフォームのタイプ指定」を中心に、実装例も紹介しながらアップデートの概要を説明したい。

Angular公式サイト::
https://blog.angular.io/angular-v14-is-now-available-391a6db736af

では、Angular14のアップデート内容を見ていこう！

目次

スタンドアロン・コンポーネント

Angular 14の目玉ともいえる機能がスタンドアロン・コンポーネントだ。

スタンドアロン・コンポーネントを使用することにより、コンポーネントをひとつのモジュールのように扱うことができる。これを使用すればモジュールファイル（app.module.ts）を省略することもできる。

スタンドアロン・コンポーネントは仮想のモジュールとして捉えてもいいだろう。

スタンドアロン・コンポーネントの使用方法

スタンドアロン・コンポーネントの使用方法を見ていこう。

新しくコンポーネントを作成する場合

新規に作成するコンポーネントをスタンドアロンとしたい場合は以下のようにNGコマンドを使ってコンポーネントを作成すればいい。

ng generate component component-name –standalone

既存のコンポーネントをスタンドアロンに変更する場合

既にプロジェクト内に存在するコンポーネントをスタンドアロンにしたい場合は以下のように変更をおこなう。

また、目的のコンポーネントのComponentデコレーターにstandaloneプロパティを付け加える。

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  standalone: true,
}

コンポーネントが属するモジュールファイルを開き、スタンドアロンのコンポーネントをdeclarationsプロパティから削除し、importsプロパティに加える。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    FormsModule,
    MyComponent
  ],

コンポーネント内で使用しているすべてのモジュールをコンポーネントのComponentデコレーターに登録する。

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  standalone: true,
  imports: [FormsModule]
}

問題が無ければこれでコンポーネントのスタンドアロン化は完了だ。

AppComponentをスタンドアロンにする

アプリを構成するコンポーネントと同様にAppComponentをスタンドアロン化することもでできる。

AppComponentのComponentデコレーターにて、standaloneプロパティをtrueに設定したうえで使用しているモジュールをインポートする。

不要となったモジュールファイル（app.module.ts）は削除することができる。

その際はmain.tsにて、bootstrapAllication()関数を使用してBootStrapをおこなう。

bootstrapApplication(AppComponent,{
  providers: [
    importProvidersFrom(RouterModule.forRoot(routes))
  ]
}).catch(err => console.error(err));

リアクティブフォームのタイプ指定

Angular 14では、リアクティブフォームのデータ型を指定できるようになった。TypeScirptを使用するAngularとしては、これは今さらともいえるアップデートだが助かる機能だ。

なお、Angularは「リアクティブフォーム」と「テンプレートフォーム」という2種類のフォームを備えているが、今回のアップデートではテンプレートフォームに影響はない。Angularのフォームやバリデーションについて知りたい人はこちらの記事を読んでほしい。

リアクティブフォームの作成方法

リアクティブフォームでは、フォーム全体を統制するFormGroupと個別のフォームにあたるFormControlを使用してユーザの変更を管理する。

Angular 14ではFormControlがジェネリック型となっているのでデータ型を指定することができる。

const customerForm = new FormGroup({
  name: new FormControl<string>('Your Name', [Validators.nullValidator]),
  age: new FormControl<number>(0),
  email: new FormControl<string>('sample@mail.co.jp', [Validators.email])
})

型指定をおこないたくない時はUntypedFormControlとUntypeFormGroupを使用することもできる。

const untypedForm = new UntypedFormGroup({
  name: new UntypedFormControl('Your Name'),
  age: new UntypedFormControl(0),
  email: new UntypedFormControl('sample@mail.co.jp')
})

その他の変更点

Angular 14におけるその他の変更点を簡単に紹介したい。

ルーティングでのページタイトル指定

Angular 14ではルーティングにおいてページのタイトルを指定できるようになった。

const routes: Routes = [
  {path: 'create', title: 'create new task', component: CreateTaskComponent},
  {path: 'detail', title: 'show task detail', component: TaskDetailComponent}
];

TitleStrategyクラスを使用することにより、ページタイトルを動的に生成することも可能だ。

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    document.title = title !== undefined ? title : 'no title';
  };
}

テンプレートからprotectedメンバーにアクセス可能

Angular 13以前では、テンプレートからアクセスレベルがprotectedのメンバーへはアクセスできなかったが、Angular 14からは可能となった。

protectedを使用することにより、テンプレート内でメンバーを使用しながらも他のクラスからの不本意なアクセスを防ぐことができるだろう。

MENU