Дутарафа вобастакунии дар дар Angular

Дар Angular имкон дорад, ки тавре ки воридкунии матн дар инпут, ин матн ба таври худкор ба хосияти синф дарояд. Инро дутарафа вобастакунии дар меноманд.

Барои он ки чунин вобастакунӣ фаъол шавад, аввалан онро бояд фаъол кард. Барои ин дар файли component-и мо FormsModule-ро ворид мекунем:

import { FormsModule } from '@angular/forms';

Ва сипас ба хосияти imports декоратори @Component илова мекунем:

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

Пас аз ин дутарафа вобастакунии дар фаъол хоҳад шуд ва мо метавонем аз он истифода кунем. Биёед ин корро кунем.

Аввалан хосияти синферо эълон мекунем, ки мо баъд ба дутарафа вобастакунӣ таҳти мерасонем:

export class AppComponent {
	public text: string = '';
}

Фарз кунем, ки мо як див ва як инпут дорем. Бигзор дар див як хосияти синф чоп шавад:

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

Биёед хосияти мо text-ро ба тағйироти инпут вобаста кунем. Барои ин дар инпут директиви махсуси [(ngModel)]-ро навиштан лозим аст, қимати он бояд хосияти синфи мо бошад:

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

Акнун, агар кодро оғоз карда ва матнро дар инпут ворид кардан оғоз кунем, ин матн фавран дар див намоиш дода мешавад.

Инпут ва як абзас дода шудааст. Дар инпут рақам чоп мешавад. Ба тавре созед, ки ҳангоми ворид кардани рақам дар инпут, дар абзас квадрати ин рақам намоиш дода шавад.

Ду инпут ва як абзас дода шудааст. Дар инпутҳо рақамҳо ворид карда мешаванд. Ба тавре созед, ки дар абзас ҷамъи рақамҳои воридшуда намоиш дода шавад.