# Ionic Form Controls Cheatsheet

• ion-button
• ion-input
• ion-toggle
• @ViewChild

# ion-button

<ion-button>
    <ion-icon slot="end|start|icon-only" name="search"></ion-icon>
</ion-button>

| Attribute | Values | | --------- | --------------------------------------------------------------------------------- | | expand | block \| full | | color | primary \| secondary \| tertiary \| success \| warning \| danger \| light \| dark | | fill | clear \| outline \| solid | | shape | round | | size | small \| default \| large |

# ion-input

https://ionicframework.com/docs/api/input#properties

<ion-input
    labelPlacement={end｜fixed｜floating｜stacked｜start}
/>

# ion-toggle

<ion-item>
    <ion-toggle [(ngModel)]="showNotifications">Show Notifications</ion-toggle>
</ion-item>

# @ViewChild

@ViewChild is a decorator that is used to access a child component or element in the parent component.

import { ViewChild } from '@angular/core';

@ViewChild(IonModal) modal: IonModal;

In this case, @ViewChild(IonModal) modal: IonModal; is declaring a property called modal of type IonModal that is decorated with @ViewChild. This allows the parent component to access the IonModal component and its properties and methods.