CODEWITHSUNDEEP
angularangular2-forms
ETP
ETP

Reputation: 13

What is the difference between [value] and value in Angular and what is the method of checking value for null?

<mat-form-field>
    <input matInput placeholder="Organization name" [value]="organizationDetail.name"
        formControlName="organizationName" required>
</mat-form-field>

What is the way to check if organizationDetail.name is null or not? I am getting error

ERROR TypeError: Cannot read property 'name' of null

in my .ts file I am initializing it like below:

organizationDetail: any = {};

constructor() {
    this.organizationDetail = {
        address: '',
        attachmentId: null,
        createdBy: '',
        createdDateTime: '',
        industryFramework: [],
        invitation: [],
        location: '',
        name: '',
        orgAssessment: [],
        organizationId: 0,
        organizationPolicy: [],
        ownerId: 0,
        partnerType: null,
        partnerTypeId: 0,
        phone: '',
        updateBy: '',
        updateDateTime: '',
        user: [],
    };
}

Thanks for your help in advance. I wasn't able to find any good article which can help me to identify the difference and solve the error.

Upvotes: 1

Views: 4010

Answers (1)

Sanjay Lohar
Sanjay Lohar

Reputation: 528

Interpolation and Property binding are virtually the same, and bind-src is just an alternate way that is wordy and not often used.

the difference:

interpolation "injects" the value into the html, so when you say value="{{ hello }}" Angular is inserting your variable between the brackets.

property binding allows Angular to directly access the elements property in the html. this is a deeper access. When you say [value]="hello" Angular is grabbing the value property of the element, and setting your variable as that property's value.

event binding allows you to use events such as a click to trigger functions. these bindings use parenthesis for example (click)="myFunction($event)". this will call the myFunction() method on defined in your .ts file. the parenthesis around '(click)' bind the function to the dom event.$event is a keyword passing the event object to the function. you could also pass a string with single quotes, or even a variable with interpolation.

Two way (data) binding allows you to have an event combined with a property binding. For example

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

will allow you to have an input and display the value at the same time. learn more here

Lastly when to use interpolation and when to use data-binding. This is usually a formality, typically when using a smart component and dumb (presentation) component, you would bind to the html with property binding because of readability, and because it is shall I say, "more secure" to bind to a property in that case. If you have simple values, then maybe interpolation is your friend. It all comes down to readability, best practice, and preference.

Upvotes: 1

Related Questions