Uunganishaji wa Takwimu Mbili-Zote katika Angular

Katika Angular inawezekana kufanya hivi: kadiri maandishi yanavyoingizwa kwenye kiingizio, maandishi hayo yanaingia kiatomati kwenye sifa ya darasa. Hii inaitwa uunganishaji wa takwimu mbili-zote.

Ili uunganishaji kama huo uanze kufanya kazi, kwa mara ya kwanza inahitajiku kuwawezesha. Ili kufanya hivyo, katika faili ya kipengele-changa tunazingatia FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

Kisha tuongeze kwenye sifa imports ya kirekebishi @Component:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Baada ya hayo, uunganishaji wa takwimu mbili-zote utawekwa wazi na tutaweza kuitumia. Tuifanye.

Kwa mara ya kwanza, tutangaze sifa ya darasa ambayo tutaiweka chini ya uunganishaji wa pande mbili:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Wacha tuwe na div na kiingizio. Wacha kwenye div ionyeshe sifa fulani ya darasa:

html<div>
  {{ text }}
</div>
<input>

Wacha tuunganishe sifa yetu text kwa mabadiliko ya kiingizio. Ili kufanya hivyo, kwenye kiingizio inahitajika kuandika dira maalum [(ngModel)], ambayo thamani yake inapaswa kuonyesha sifa ya darasa letu:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

Sasa, ikiwa utaendesha kanuni na uanza kuingiza maandishi kwenye kiingizio, maandishi hayo yataanza mara moja kuonyeshwa kwenye div.