1 view

Creating a Data Model in Angular

Step 1: create user-settings.ts file in data folder then write bellow code

export interface UserSettings{
     name: string,
     emailOffers: boolean,
     interfaceStyle: string,
     subscriptionType: string,
     notes: string
 }

Step 2: define user-settings-form.component file but before import user-settings file

import { UserSettings } from './../data/user-settings';
   userSettings: UserSettings = {
     name: 'Bipon',
     emailOffers: true ,
     interfaceStyle: 'dark',
     subscriptionType: 'Annual',
     notes: 'here some notes here'
   }

Step 3: using in html file for two way binding (user-settings-form.component.html)

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" />
    </div>
</form>

{{userSettings | json}}

Leave a Reply