Lesson O1 - Angular 7

Structure Directives (ngIf  , ngFor , ngSwitch)

ඔයාලා මිට පෙර if else, switch case , for loop මෙන්න මේ වගෙ දෙවල් ටිකක් ගැන  C language  හො java වැනි language වලින් ඉගෙන ගෙන තියනව නම් ඔයාලට මතක ඇති  කියලා මන් හිතනවා. අන්න ඒ  වැඩ ටික කරගන්න තමයි angular වලදි මෙන්න මේ Structural Directives use වෙන්නෙ.

1)   අපි  බලමු ngIf Directive කියන්නෙ මොකද්ද කියලා.

මේකෙදි වෙන්නෙ සරල වැඩක් මොකක්  හරි variable එකක් true උනොත් මේ ngif එක යටතේ තියෙන දෙවල්  වැඩ කරනවා . එහෙම උනේ නැත්නම් ඒ කියන්නෙ false නම් වැඩ කරන්නෙ නෑ . පහත  නිදසුන බැලුවොත් ඔයාලට ඒක පැහැදිලි වේවි.

component.ts

component.html

ඔයාලට පහත ආකරයෙ output එකක් බලාගන්න පුලුවන් වෙවි.

මේක පහත ආකාරයට else part  එකක් add කර  ගන්න පුලුවන්.එකට ng-templete කියලා elements එක්ක හදා ගන්න වෙනවා.එහෙම  එක්ක හදා ගෙන ඒකට පහත ආකරයට reference variable assign කරගන්න ඕන.

component.ts

component.html

දැන් අපිට බල ගන්න පුලුවන්  true block එක වැඩ කරලා "Condition is true" කියල output එකක්. මොකද අපි ts file ඒකෙ "condition=true;" කරලා තියන නිසා.

දැන් අපි බලමු ngIf Directive වල special අවස්ථා ටිකක්.

1.1)  කොහොමද string value එකක් compare කරන්නෙ  කියලා.

component.ts

component.html

ඒකෙදි ඔයාලට බල ගන්න පුලුවන් වෙයි පහත ආකාරයෙ  output එකක්.

1.2) කොහොමද integer value එකක් compare කරන්නෙ  කියලා.

component.html

component.ts

ඒකෙදි ඔයාලට  පහත output එකක් බලා ගන්න පුලුවන් වෙවි.

ඉහත ආකාරයටම AND ,OR  Operations වලටත් ඔයාලා කරල බලන්න.

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://angular.io/api/common/NgIf

2 )   දැන් බලමු ngFor Directive කියන්නෙ මොක්කද? කොහොමද                  එකෙන් වැඩ කරන්නෙ  කියලා.

for කියද්දි අපට මතක් වෙන්නෙ looping . මේ ngFor Directive එක use වෙන්නෙත් loop වලට . ඒ කියන්නෙ template  එකේ එකම component එකක් හරි form එකක් හරි කිහිපවතාවක් පෙන්නගන්න ඕන නම් . ඒ කියන්නෙ array එකක තියෙන elements ටික පෙන්නගන්න ඕන කියලා හිතන්න. මේ වගේ වැඩ වලට තමයි ngFor use කරන්නෙ .

දැන් මම පහත ආකාරයට array  එකක් හදා ගන්න ඕන.

  name=['Madhusanka','Edirimanna','Pramodi','Samaratunga'];

දැන් අපි මේක template එකේ එකින් එක පෙන්න ගන්නේ කොහොමද කියල බලමු .ඒකට මෙන්න මේ වගෙ syntax එකක් use වෙනවා.*ngFor='let myName of name';

මෙකෙන් කියවෙන්නෙ name කියන array එකෙන් එක බැගින් අරගෙන myName කියන variable එකට assign කරන්න කියන එක.මෙතන myName වෙනුවට අපට කැමති නමක් දෙන්න පුලුවන් . නමුත් name කියන එක වෙනස් කරන්න බෑ . ඒක තමයි array එකේ name(නම) එක.

දැන් ඉතින් Myname කියන variable එක view කරගන්න තියෙන්නෙ...ඒකට interpolation use කරන්න පුලුවන්.මතක ඇති component එකේ තියෙන දෙයක් template එකේ පෙන්නගන්න interpolation යොදා ගන්න ඕන. double curly brases දාගෙන.ඒකම තමයි මෙතනත් කරන්න තියෙන්නෙ .

component.html

component.ts

 මේක පහත විදියට view කරලා බලාගන්න පුලුවන් .

පහත ආකරයට  තමන්ට කැමති element විතරක් array එකෙන් view කර ගන්න පුලුවන්.ඒ සදහා පහත syntax භාවිතා කරන්න පුලුවන්.

component.html

component.ts

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://coryrylan.com/blog/angular-ng-for-syntax

03 )   දැන් බලමු ngSwitch Directive කියන්නෙ මොක්කද? කොහොමද             එකෙන් වැඩ කරන්නෙ  කියලා.

java වල switchcase තේරුනා නම් මේකත් ඒ වගේමයි.හරිම ලේසියි.සමාන output කිහිපයක් තියෙද්දි  නිවැරදි එක තෝරගන්න තමා මේක use කරන්නෙ.java වල වගේම ngSwitch කියල මුලින්ම අදාල variable එක assign කරනවා . ඊට පස්සෙ *ngSwitchCase කියල selective ටික assign කරනව .  code එක බැලුවාම හොදටම පැහැදිලි වේවි ඔයාලට.

component.html

component.ts

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://angular.io/api/common/NgSwitch


අපි එහෙනම්  next lesson එකෙන් හමුවෙමු.

By :- Madhusanka Edirimanna