7853.d340d990a0b2e69f.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[7853],{7853:(m,l,r)=>{r.r(l),r.d(l,{NpDirectivesDemoModule:()=>d});var c=r(6895),u=r(8379),e=r(4650),t=r(5499);function g(a,n){if(1&a&&(e.TgZ(0,"li",9),e._uU(1),e.qZA()),2&a){const i=n.$implicit;e.xp6(1),e.hij(" ",i," ")}}function Z(a,n){if(1&a&&(e.TgZ(0,"li",9),e._uU(1),e.qZA()),2&a){const i=n.$implicit;e.xp6(1),e.hij(" ",i," ")}}function h(a,n){1&a&&(e.TgZ(0,"div",10),e._uU(1," This content is lazy loaded. "),e.qZA())}class p{constructor(){this.text="A paragraph is a series of related sentences developing a central idea, called the topic.Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea.Paragraphs add one idea at a time to your broader argument.",this.highlightTextCode="<p [innerHTML]=\"text | npHighlight: 'paragraph'\"></p>",this.autofocusTextCode='<input type="text" [npAutofocus]="true">',this.orderByCode="<ul>\n  <li *ngFor=\"let item of items | npOrderBy : null : 'asc'\">\n    {{item}}\n  </li>\n</ul>",this.deferCode='<div npDefer (onLoad)="onLoadDefer()">\n <ng-template>\n    ... Lazy load content\n </ng-template>\n</div>',this.items=["A","B","C","D","E","F"]}ngOnInit(){}onLoadDefer(){alert("Defer loaded")}static#e=this.\u0275fac=function(i){return new(i||p)};static#i=this.\u0275cmp=e.Xpm({type:p,selectors:[["app-np-directives-demo"]],decls:83,vars:18,consts:[[1,"page-header"],["id","linkHighLightPipe"],[3,"innerHTML"],[3,"innerText"],[1,"np-row"],[1,"np-col","np-col-6"],[1,"np-list-group"],["class","np-list-group-item",4,"ngFor","ngForOf"],["npDefer","",3,"onLoad"],[1,"np-list-group-item"],[2,"background-color","lightblue"]],template:function(i,o){1&i&&(e.TgZ(0,"h2",0),e._uU(1,"Directives & Pipes"),e.qZA(),e.TgZ(2,"np-card")(3,"np-card-body")(4,"fieldset")(5,"legend"),e._uU(6,"How to add autofocus to input control?"),e.qZA(),e.TgZ(7,"p")(8,"b"),e._uU(9,"npAutofocus"),e.qZA(),e._uU(10," directive is available in "),e.TgZ(11,"b"),e._uU(12,"NpAutofocusModule"),e.qZA(),e._uU(13,". "),e.qZA(),e.TgZ(14,"pre")(15,"code"),e._uU(16),e.qZA()()()()(),e.TgZ(17,"np-card")(18,"np-card-body")(19,"fieldset")(20,"legend",1),e._uU(21,"How to highlight Text?"),e.qZA(),e.TgZ(22,"p")(23,"b"),e._uU(24,"npHighlight"),e.qZA(),e._uU(25," pipe is available in "),e.TgZ(26,"b"),e._uU(27,"NpHighlightModule"),e.qZA(),e._uU(28,"."),e.qZA(),e.TgZ(29,"pre")(30,"code"),e._uU(31),e.qZA()(),e._UZ(32,"p",2),e.ALo(33,"npHighlight"),e.qZA()()(),e.TgZ(34,"np-card")(35,"np-card-body")(36,"fieldset")(37,"legend"),e._uU(38,"How to sort array?"),e.qZA(),e.TgZ(39,"p")(40,"b"),e._uU(41,"npOrderBy"),e.qZA(),e._uU(42," pipe is available in "),e.TgZ(43,"b"),e._uU(44,"NpOrderByModule"),e.qZA(),e._uU(45,"."),e.qZA(),e.TgZ(46,"pre"),e._UZ(47,"code",3),e.qZA(),e.TgZ(48,"div"),e._uU(49," First parameter is property name if array is type of any[]. if array is type of string[] then it will be null. "),e.qZA(),e.TgZ(50,"div"),e._uU(51," Second parameter is direction. Direction can be 'asc' or 'desc'. "),e.qZA(),e.TgZ(52,"div",4)(53,"div",5)(54,"b"),e._uU(55,"Ascending:"),e.qZA(),e.TgZ(56,"ul",6),e.YNc(57,g,2,1,"li",7),e.ALo(58,"npOrderBy"),e.qZA()(),e.TgZ(59,"div",5)(60,"b"),e._uU(61,"Descending:"),e.qZA(),e.TgZ(62,"ul",6),e.YNc(63,Z,2,1,"li",7),e.ALo(64,"npOrderBy"),e.qZA()()()()()(),e.TgZ(65,"np-card")(66,"np-card-body")(67,"fieldset")(68,"legend"),e._uU(69,"How to defer loading?"),e.qZA(),e.TgZ(70,"div")(71,"b"),e._uU(72,"npDefer"),e.qZA(),e._uU(73," directive is available in "),e.TgZ(74,"b"),e._uU(75,"NpDeferModule"),e.qZA(),e._uU(76,"."),e.qZA(),e.TgZ(77,"div"),e._uU(78,"npDefer is working on scroll event of window."),e.qZA(),e.TgZ(79,"pre"),e._UZ(80,"code",3),e.qZA(),e.TgZ(81,"div",8),e.NdJ("onLoad",function(){return o.onLoadDefer()}),e.YNc(82,h,2,0,"ng-template"),e.qZA()()()()),2&i&&(e.xp6(16),e.Oqu(o.autofocusTextCode),e.xp6(15),e.Oqu(o.highlightTextCode),e.xp6(1),e.Q6J("innerHTML",e.xi3(33,7,o.text,"paragraph"),e.oJD),e.xp6(15),e.Q6J("innerText",o.orderByCode),e.xp6(10),e.Q6J("ngForOf",e.Dn7(58,10,o.items,null,"asc")),e.xp6(6),e.Q6J("ngForOf",e.Dn7(64,14,o.items,null,"desc")),e.xp6(17),e.Q6J("innerText",o.deferCode))},dependencies:[c.sg,t.c0,t.El,t.oz,t.wQ,t.k7],encapsulation:2})}const f=[{path:"",component:p}];class s{static#e=this.\u0275fac=function(i){return new(i||s)};static#i=this.\u0275mod=e.oAB({type:s});static#t=this.\u0275inj=e.cJS({imports:[u.Bz.forChild(f),u.Bz]})}class d{static#e=this.\u0275fac=function(i){return new(i||d)};static#i=this.\u0275mod=e.oAB({type:d});static#t=this.\u0275inj=e.cJS({imports:[c.ez,s,t.Tk,t.h$,t.bc,t.Kf,t.KP]})}}}]);