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 |
පහත ආකරයට තමන්ට කැමති element විතරක් array එකෙන් view කර ගන්න පුලුවන්.ඒ සදහා පහත syntax භාවිතා කරන්න පුලුවන්.
 |
| component.html |
 |
| component.ts |
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
