Angular පාඩම 7 - Structural Directives( ngIf, ngSwitch, ngFor )

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

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

මේකෙ myVaribale_one කියන එක true නිසා ngIf = true වන form එක පමනයි වැඩ කරන්නෙ..

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

මේකෙදි trueblock එක වැඩ කරනවා බලාගන්න පුලුවන්..මොකද myVaribale_one  true නිසා...

දැන් අපි බලමු ngSwitch Directive එක ගැන...

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

date එක Friday නිසා ඒ අදාල case එක වැඩ කරනව බලාගන්න පුලුවන්...

දැන් අපට බලන්න තියෙන්නෙ ngFor ගැන.. 

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

අපි උදාහරනයක් අරන් බලමු.මුලිම්ම component class එකේ array එකක් හදාගන්න ඕන.

මේ වගේ,

days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

දැන් අපි මේක template එකේ එකින් එක පෙන්න ගන්න ඕන.ඒකට මෙන්න මේ වගෙ syntax එකක් use වෙනවා..  *ngFor='let day of days';

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

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

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

ඒනම් අදට ඉවරයි..සුබ දවසක්.

ජයවේවා...