Angular හි ද්වි-මාර්ග දත්ත බැඳීම
Angular හි, input box එකකට අකුරු ඇතුළු කරන විට එම අකුරු ස්වයංක්රීයව class එකේ property එකකට ගමන් කරන පරිදි සකස් කළ හැකිය. මෙය ද්වි-මාර්ග දත්ත බැඳීම ලෙස හැඳින්වේ.
එවැනි බැඳීමක් ක්රියාත්මක වන පරිදි සකස් කිරීම සඳහා, පළමුව එය සක්රීය කළ යුතුය. මේ සඳහා component ගොනුව තුළ FormsModule import කරන්න:
import { FormsModule } from '@angular/forms';
ඉන්පසු @Component decorator එකේ imports property එකට එක් කරන්න:
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule, UserComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
මෙයින් පසුව ද්වි-මාර්ග දත්ත බැඳීම සක්රීය වන අතර අපට එය භාවිතා කළ හැකිය. අපි එය කර බලමු.
පළමුව, අපි ද්වි-මාර්ග බැඳීමට ලක් කිරීමට යන class property එකක් දැක්වීම කරමු:
export class AppComponent {
public text: string = '';
}
අපට div එකක් සහ input box එකක් ඇතැයි සිතමු. div එක තුළ class එකේ යම් property එකක් ප්රදර්ශනය කරමු:
<div>
{{ text }}
</div>
<input>
දැන් අපගේ text property එක input box එකේ වෙනස්වීම් වලට බඳිමු. මේ සඳහා input box එක තුළ විශේෂ directive එකක් වන [(ngModel)] ලිවිය යුතු අතර, එහි අගය ලෙස අපගේ class එකේ property එක දැක්විය යුතුය:
<div>
{{ text }}
</div>
<input [(ngModel)]="text">
දැන්, කේතය ක්රියාත්මක කර input box එකට අකුරු ඇතුළු කිරීම ආරම්භ කළහොත්, එම අකුරු වහාම div එක තුළ පෙන්වනු ඇත.
Input box එකක් සහ ඡේදයක් දී ඇත. Input box එකට අංකයක් ඇතුළු කරයි. Input box එකට අංකය ඇතුළු කරන විට, ඡේදය තුළ එම අංකයේ වර්ගය ප්රදර්ශනය වන පරිදි සකස් කරන්න.
Input box දෙකක් සහ ඡේදයක් දී ඇත. Input box වලට අංක ඇතුළු කරයි. ඇතුළු කරන ලද අංකවල එකතුව ඡේදය තුළ පෙන්වන පරිදි සකස් කරන්න.
