Varf\u00f6r ska man anv\u00e4nda ett komponentbibliotek?<\/h2>\n
Oavsett om du bygger dem sj\u00e4lv eller anv\u00e4nder dig av bibliotek fr\u00e5n tredje part s\u00e5 utg\u00f6r komponenterna grunden f\u00f6r Angular-applikationer. Varje komponent \u00e4r beroende av en mall f\u00f6r sina HTML- och CSS-element. De \u00e4r dessutom beroende av en TypeScript-kod som styr dess beteende.<\/p>\n
Den viktigaste f\u00f6rdelen med komponentbibliotek \u00e4r att de tillhandah\u00e5ller \u00e5teranv\u00e4ndbara, f\u00f6rbyggda gr\u00e4nssnittskomponenter. Som ett resultat s\u00e5 minskar behovet av egen kod och utvecklare kan snabbt f\u00e5 ig\u00e5ng sina applikationer.<\/p>\n
Angular\u2019s tillv\u00e4gag\u00e5ngss\u00e4tt f\u00f6r komponenter kan \u00e4ven f\u00f6rb\u00e4ttra samarbetet mellan olika team av programmerare som skriver TypeScript-kod. Det kan dessutom f\u00f6renklar arbetet f\u00f6r webbdesigners som tillhandah\u00e5ller HTML f\u00f6r mallarna.<\/p>\n
Komponentbibliotek l\u00e4ggs vanligtvis till Angular-projekt med hj\u00e4lp av Node.js Komponentbiblioteken p\u00e5 v\u00e5r lista har valts ut beroende p\u00e5 flera kriterier:<\/p>\n L\u00e5t oss nu ta en n\u00e4rmare titt p\u00e5 v\u00e5ra val.<\/p>\n Angular Material<\/a> \u00e4r det officiella Angular-komponentbiblioteket. Det erbjuder en omfattande UI-samling samtidigt som det h\u00e5ller sig uppdaterat med de senaste Angular-funktionerna och API-\u00e4ndringarna. Det erbjuder dessutom ett inbyggt st\u00f6d f\u00f6r tillg\u00e4nglighet och genererar markup f\u00f6r att m\u00f6jligg\u00f6ra tangentbordsnavigering och v\u00e4gleda hj\u00e4lpmedel som sk\u00e4rml\u00e4sare.<\/p>\n Hur det fungerar:<\/strong> Angular Material utnyttjar Angular\u2019s inbyggda direktiv och tj\u00e4nster f\u00f6r att tillhandah\u00e5lla en upps\u00e4ttning av databundna komponenter och prestanda-komponenter ovanp\u00e5 Angular. Som ett resultat s\u00e5 blir det enkelt att l\u00e4gga till interaktivitet i webbapplikationer.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Angular Material utm\u00e4rker sig genom att tillhandah\u00e5lla f\u00f6rbyggda UI-komponenter som f\u00f6ljer Material Design-riktlinjerna. Det erbjuder en upps\u00e4ttning av v\u00e4ldesignade och anpassningsbara gr\u00e4nssnittskomponenter som enkelt kan integreras i Angular-applikationer. Dessa komponenter omfattar navigeringsmenyer, knappar, formul\u00e4r, dialogrutor med mera.<\/p>\n Om du exempelvis vill l\u00e4gga till en knappkomponent i din applikation s\u00e5 kan du helt enkelt anv\u00e4nda direktivet H\u00e4r \u00e4r ett exempel p\u00e5 ett kod-utdrag:<\/p>\n Den h\u00e4r koden genererar en knappkomponent med det prim\u00e4ra f\u00e4rgschemat. Du kan anpassa knappen ytterligare genom att l\u00e4gga till h\u00e4ndelsehanterare, samt \u00e4ndra texten och utseendet p\u00e5 ikonen.<\/p>\n NG-Bootstrap<\/a> \u00e4r ett bibliotek med \u00f6ppen k\u00e4llkod som bygger p\u00e5 Bootstrap CSS. Det tillhandah\u00e5ller komponenter och designm\u00f6nster som m\u00e5nga utvecklare redan \u00e4r bekanta med. Som ett resultat s\u00e5 minskar inl\u00e4rningskurvan f\u00f6r nya projekt, och det \u00e4r d\u00e4rf\u00f6r ett p\u00e5litligt val f\u00f6r att bygga Angular-applikationer snabbt och effektivt.<\/p>\n Hur det fungerar: <\/strong>NG-Bootstrap ut\u00f6kar Bootstrap-komponenternas m\u00f6jligheter genom att l\u00e5ta utvecklare anv\u00e4nda dem som Angular-direktiv, med tv\u00e5v\u00e4gsdatabindning och andra Angular-specifika funktioner. Som ett resultat s\u00e5 blir det enkelt f\u00f6r utvecklare att skapa responsiva, mobilv\u00e4nliga webbapplikationer som fungerar s\u00f6ml\u00f6st med Angular.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> En av NG-Bootstraps fr\u00e4msta styrkor \u00e4r dess st\u00f6d f\u00f6r tillg\u00e4nglighetsfunktioner. Detta inkluderar exempelvis W3C\u2019s specifikationer f\u00f6r Accessible Rich Internet Applications (ARIA). Dessa specifikationer g\u00f6r det l\u00e4ttare f\u00f6r utvecklare att skapa applikationer som kan anv\u00e4ndas av personer med funktionshinder. NG-Bootstrap utm\u00e4rker sig dessutom p\u00e5 omr\u00e5det f\u00f6r modala dialoger. Med komponenten H\u00e4r \u00e4r ett exempel p\u00e5 hur man skapar en grundl\u00e4ggande modal dialogruta med NG-Bootstrap:<\/p>\n I det h\u00e4r exemplet s\u00e5 inkluderar elementet Clarity<\/a> \u00e4r ett bibliotek med \u00f6ppen k\u00e4llkod som anv\u00e4nder ett gemensamt visuellt spr\u00e5k f\u00f6r alla sina komponenter. Allt f\u00f6r att ge ett enhetligt och intuitivt anv\u00e4ndargr\u00e4nssnitt. Det \u00e4r \u00e4ven utf\u00f6rligt dokumenterat, med m\u00e5nga guider, handledningar och API-referenser. Som ett resultat s\u00e5 blir det enkelt att l\u00e4ra sig och anv\u00e4nda.<\/p>\n Hur det fungerar:<\/strong> Clarity\u2019s designsystem bygger p\u00e5 konceptet ”kort”, som anv\u00e4nds f\u00f6r att gruppera relaterat inneh\u00e5ll. Kort anv\u00e4nds f\u00f6r att representera enskilda delar av inneh\u00e5llet p\u00e5 ett strukturerat och organiserat s\u00e4tt. Clarity tillhandah\u00e5ller en m\u00e4ngd olika kortkomponenter som kan presentera data i olika format. Dessa kortkomponenter omfattar exempelvis sidhuvuden, sidf\u00f6tter och inneh\u00e5llssektioner och kan enkelt anpassas med olika stilar och teman.<\/p>\n Korten kan dessutom kombineras med andra komponenter – exempelvis modaler, dropdowns och knappar – f\u00f6r att skapa mer komplexa UI-designs. Det \u00f6vergripande m\u00e5let med den kortbaserade designen \u00e4r att tillhandah\u00e5lla ett flexibelt och modul\u00e4rt system f\u00f6r att enkelt skapa komplexa gr\u00e4nssnitt.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Clarity\u2019s omfattande upps\u00e4ttning av formul\u00e4rkontroller \u00e4r en klar styrka. Dessa kontroller omfattar inmatningsf\u00e4lt, markeringsrutor, radioknappar med mera. Clarity erbjuder \u00e4ven en upps\u00e4ttning datavisualiseringar, exempelvis stapeldiagram, linjediagram och cirkeldiagram, f\u00f6r att visa data p\u00e5 ett tydligt och organiserat s\u00e4tt.<\/p>\n H\u00e4r \u00e4r ett exempel p\u00e5 hur man anv\u00e4nder Clarity\u2019s inmatningsf\u00e4lts-komponent i ett HTML-formul\u00e4r:<\/p>\n Den h\u00e4r koden skapar ett inmatningsf\u00e4lt med en etikett och platsh\u00e5llartext. Direktiven Kendo UI<\/a> \u00e4r ett kommersiellt bibliotek som \u00e4r byggt med prestanda i \u00e5tanke. D\u00e4rf\u00f6r s\u00e5 garanteras snabba laddningstider och en smidig anv\u00e4ndarupplevelse. Det tillhandah\u00e5ller dessutom teman och stilalternativ f\u00f6r att f\u00f6rb\u00e4ttra utseendet och k\u00e4nslan i din applikation, samt omfattande dokumentation och ett dedikerat supportteam.<\/p>\n Hur det fungerar:<\/strong> Kendo UI anv\u00e4nder tekniker som virtualisering och lat laddning f\u00f6r att s\u00e4kerst\u00e4lla snabba laddningstider och en smidig anv\u00e4ndarupplevelse. Som ett resultat s\u00e5 blir applikationer som byggs med Kendo UI b\u00e5de snabba och responsiva, \u00e4ven n\u00e4r de hanterar stora datam\u00e4ngder. Kendo UI f\u00f6ljer dessutom en modul\u00e4r arkitektur som g\u00f6r det m\u00f6jligt f\u00f6r utvecklare att endast anv\u00e4nda de komponenter som de beh\u00f6ver. D\u00e4rf\u00f6r s\u00e5 minskar bibliotekets storlek och prestandan f\u00f6rb\u00e4ttras.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Kendo UI \u00e4r s\u00e4rskilt l\u00e4mpat f\u00f6r applikationer p\u00e5 f\u00f6retagsniv\u00e5 som kr\u00e4ver en omfattande datahantering och komplexa anv\u00e4ndarinteraktioner. Dess rutn\u00e4tskomponent har exempelvis st\u00f6d f\u00f6r funktioner som filtrering, sortering och gruppering. Som ett resultat s\u00e5 blir det m\u00f6jligt f\u00f6r utvecklare att presentera stora datam\u00e4ngder f\u00f6r anv\u00e4ndarna p\u00e5 ett hanterbart s\u00e4tt.<\/p>\n H\u00e4r \u00e4r ett kod-utdrag som visar hur man skapar ett enkelt Kendo UI-rutn\u00e4t i HTML:<\/p>\n Den h\u00e4r koden visar ett Kendo UI-rutn\u00e4t i din Angular-applikation. Du kan anpassa rutn\u00e4tet genom att skicka olika konfigurationsalternativ till PrimeNG<\/a> \u00e4r ett bibliotek med \u00f6ppen k\u00e4llkod som \u00e4r utformat f\u00f6r enkel anv\u00e4ndning och anpassning. Det inkluderar \u00e4ven avancerade tillg\u00e4nglighetsfunktioner och st\u00f6d f\u00f6r internationalisering. Som ett resultat s\u00e5 \u00e4r det ett utm\u00e4rkt val f\u00f6r globala applikationer.<\/p>\n Hur det fungerar:<\/strong> PrimeNG-biblioteket tillhandah\u00e5ller en upps\u00e4ttning f\u00f6rbyggda UI-komponenter som utvecklare enkelt kan integrera i sina Angular-applikationer. Det anv\u00e4nder Angular\u2019s inbyggda direktiv och livscykelkrokar f\u00f6r att ge en s\u00f6ml\u00f6s integrering med ramverket. Det st\u00f6der \u00e4ven olika konfigurationsalternativ och anpassningar s\u00e5 att utvecklare kan anpassa komponenterna till sina specifika behov.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> En av de viktigaste funktionerna i PrimeNG \u00e4r dess st\u00f6d f\u00f6r internationalisering. Biblioteket st\u00f6der flera spr\u00e5k och tillhandah\u00e5ller \u00f6vers\u00e4ttningstj\u00e4nster f\u00f6r de flesta av sina komponenter. Detta uppn\u00e5s genom anv\u00e4ndning av Angular\u2019s lokaliseringsramverk och meddelandefiler, som enkelt kan anpassas och uppdateras.<\/p>\n F\u00f6r att anv\u00e4nda internationalisering i PrimeNG s\u00e5 m\u00e5ste du skapa \u00f6vers\u00e4ttningsfiler f\u00f6r de spr\u00e5k som du vill st\u00f6dja. Dessa filer b\u00f6r inneh\u00e5lla \u00f6vers\u00e4ttningar f\u00f6r alla komponenter som du vill anv\u00e4nda i din applikation. F\u00f6r att aktivera internationalisering i PrimeNG s\u00e5 m\u00e5ste du st\u00e4lla in attributet H\u00e4r \u00e4r ett exempel p\u00e5 hur du anv\u00e4nder komponenten I det h\u00e4r exemplet s\u00e5 har komponenten Nebular<\/a> \u00e4r en samling av mer \u00e4n 40 Angular UI-komponenter som finns i fyra anpassningsbara teman. Biblioteket, som har skapats av webbutvecklingsf\u00f6retaget Akveo, levereras dessutom med en modul f\u00f6r anv\u00e4ndarautentisering och en ACL-baserad s\u00e4kerhetsmodul f\u00f6r att kontrollera en mer detaljerad \u00e5tkomst till specifika resurser. Akveo kan \u00e4ven hj\u00e4lpa dig att komma ig\u00e5ng med din egen applikation f\u00f6r administrat\u00f6rens instrumentpanel. Detta blir m\u00f6jligt tack vare\u00a0ngx-admin-kitet<\/strong> som byggs med Nebular-moduler.<\/p>\n Hur det fungerar:<\/strong> Nebular\u2019s UI-strategi bygger p\u00e5 specifikationerna i Akveos Eva Design System<\/a>, som \u00e4ven tillhandah\u00e5ller tillg\u00e5ngar f\u00f6r team vars arbete b\u00f6rjar med designverktyg som Sketch eller Figma.<\/p>\n Designers som arbetar med Nebulars CSS kan generellt h\u00e4nvisa till stylingalternativ p\u00e5 ett semantiskt s\u00e4tt – exempelvis f\u00e4rgvariablerna Nebular\u2019s komponentbibliotek inneh\u00e5ller layouter, kort, listor, dragspel, navigeringshj\u00e4lpmedel, formul\u00e4relement, datatabeller, modaler och \u00f6verlagringar samt widgets som spinnare, dataplockare och framstegsbalkar.<\/p>\n Metadata f\u00f6r en Nebular-komponent med dragspel kan se ut s\u00e5 h\u00e4r TypeScript:<\/p>\n Och dess mall kan se ut s\u00e5 h\u00e4r:<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Nebular-biblioteket och ngx-admin-kitet<\/strong> f\u00f6r admininstrumentpanelen \u00e4r kostnadsfritt att anv\u00e4nda. Detta \u00e4r ett stort plus f\u00f6r en s\u00e5 sofistikerad samling verktyg. Autentiserings- och s\u00e4kerhetsmodulerna \u00e5terspeglar Akveos fokus p\u00e5 dessa komponenter f\u00f6r administrationsf\u00e4ltet.<\/p>\n Nebular har dessutom ett starkt st\u00f6d f\u00f6r spr\u00e5k som l\u00e4ser fr\u00e5n h\u00f6ger till v\u00e4nster (RTL). Anv\u00e4ndarna kommer att hitta CSS-markering f\u00f6r att st\u00f6dja RTL- (och LTR-) layouter och metoder. Detta inkluderar exempelvis\u00a0 NG-Lightning<\/a> \u00e4r ett intressant till\u00e4gg till komponentbiblioteket. Det \u00e4r n\u00e4mligen en Angular-anpassad implementering av Salesforce Lightning Design System<\/a> (LDS). Detta system tillhandah\u00e5ller HTML- och CSS-element – bl\u00e5kopior – och designriktlinjer f\u00f6r Salesforce-utvecklare som anv\u00e4nder plattformens Lightning-ramverk. De viktigaste delarna av LDS \u00e5terspeglas i denna samling Angular-widgetar med \u00f6ppen k\u00e4llkod, inklusive HTML och CSS.<\/p>\n Hur det fungerar:<\/strong> NG-Lightning har beroenden som skiljer det fr\u00e5n n\u00e5gra av de andra komponentbiblioteken. F\u00f6rutom att de \u00e4r beroende av det officiella Angular Component Dev Kit<\/a>, s\u00e5 l\u00e4nkar NG-Lightning-applikationer till samma CSS-arkiv som Salesforce LDS anv\u00e4nder. CSS kan laddas ner fr\u00e5n det officiella Salesforce UX-arkivet<\/a> eller l\u00e4nkas via ett CDN.<\/p>\n Det TypeScript-baserade tillv\u00e4gag\u00e5ngss\u00e4ttet f\u00f6r att bygga vyer kommer \u00e4nd\u00e5 att vara bekant f\u00f6r Angular-utvecklare. Det h\u00e4r exemplet skulle starta metadata f\u00f6r varningskomponenten som visas ovan:<\/p>\n Komponentmallen f\u00f6r det officiella NG Lightning-exemplet \u00e4r:<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> NG-Lightnings utvecklare tar webbtillg\u00e4nglighet p\u00e5 allvar. Detta \u00e5terspeglar deras grund i Salesforce LDS. Dynamiskt genererade gr\u00e4nssnitt som \u00e4r k\u00e4nnetecknande f\u00f6r ramverk som Angular kan ofta vara en utmaning f\u00f6r slutanv\u00e4ndare med syn- eller r\u00f6relsehinder. NG-Lightning f\u00f6ljer W3C\u2019s riktlinjer f\u00f6r ARIA-specifikationer och genererar en webbutformning som \u00e4r utformad f\u00f6r att st\u00f6dja hj\u00e4lpmedel som sk\u00e4rml\u00e4sare.<\/p>\n Syncfusion UI<\/a> \u00e4r ett l\u00e4ttviktigt och modul\u00e4rt bibliotek som g\u00f6r det m\u00f6jligt f\u00f6r utvecklare att endast v\u00e4lja de n\u00f6dv\u00e4ndiga komponenterna f\u00f6r sin applikation och minska den totala storleken p\u00e5 det slutliga paketet. Som ett resultat s\u00e5 blir det enkelt att underh\u00e5lla, ut\u00f6ka och uppdatera biblioteket genom att l\u00e4gga till nya komponenter eller \u00e4ndra befintliga komponenter utan att p\u00e5verka de andra.<\/p>\n Hur det fungerar:<\/strong> N\u00e4r en sida laddas s\u00e5 initialiserar och skapar Syncfusion UI-biblioteket de n\u00f6dv\u00e4ndiga komponenterna baserat p\u00e5 markeringen och konfigurationsalternativen. Med rutn\u00e4tskomponenten s\u00e5 kan anv\u00e4ndarna exempelvis sortera, filtrera och gruppera data. Diagramkomponenten kan dessutom visa data i olika format, exempelvis i linje-, stapel- och cirkeldiagram.<\/p>\n Biblioteket inkluderar \u00e4ven en upps\u00e4ttning hj\u00e4lpfunktioner och verktyg som kan anv\u00e4ndas f\u00f6r att f\u00f6renkla vanliga uppgifter, exempelvisd datamanipulering och validering. Biblioteket inneh\u00e5ller en datahanterare som kan anv\u00e4ndas f\u00f6r att arbeta med komplexa datastrukturer och en valideringsmotor som kan anv\u00e4ndas f\u00f6r att validera anv\u00e4ndarinmatning.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Syncfusion tillhandah\u00e5ller en robust upps\u00e4ttning av verktyg f\u00f6r anpassning och tematisering. Som ett resultat s\u00e5 blir det m\u00f6jligt f\u00f6r utvecklare att snabbt skapa ett enhetligt och professionellt utseende p\u00e5 anv\u00e4ndargr\u00e4nssnittet. Biblioteket inkluderar en kraftfull upps\u00e4ttning API: er och h\u00e4ndelser som kan anv\u00e4ndas f\u00f6r att skapa anpassad funktionalitet och interaktivitet, samt st\u00f6d f\u00f6r popul\u00e4ra datak\u00e4llor som REST API: er, OData och SignalR.<\/p>\n H\u00e4r \u00e4r ett exempel p\u00e5 hur man inkluderar en Syncfusion rutn\u00e4ts-komponent i en Angular-applikation:<\/p>\n Den h\u00e4r koden skapar ett enkelt rutn\u00e4t som visar data fr\u00e5n en datak\u00e4lla. Egenskapen Onsen UI<\/a> \u00e4r ett popul\u00e4rt UI-bibliotek med \u00f6ppen k\u00e4llkod f\u00f6r att bygga hybrid- och webb-mobilapplikationer. Det erbjuder en b\u00e4ttre och mer s\u00f6ml\u00f6s integrering med popul\u00e4ra frontend-ramverk<\/a> \u00e4n andra bibliotek fr\u00e5n tredje part. Som ett resultat s\u00e5 blir det enkelt att skapa h\u00f6gkvalitativa, interaktiva anv\u00e4ndargr\u00e4nssnitt med minimal anstr\u00e4ngning.<\/p>\n Hur det fungerar:<\/strong> Onsen UI bygger p\u00e5 Google\u2019s Material Design-filosofi, vilket s\u00e4kerst\u00e4ller att applikationens anv\u00e4ndargr\u00e4nssnitt \u00e4r b\u00e5de estetiskt tilltalande och anv\u00e4ndarv\u00e4nligt. Det tillhandah\u00e5ller en omfattande upps\u00e4ttning av inbyggda teman som kan till\u00e4mpas p\u00e5 komponenterna f\u00f6r att f\u00f6rb\u00e4ttra applikationens utseende och k\u00e4nsla.<\/p>\n D\u00e4r det utm\u00e4rker sig:<\/strong> Onsen UI utm\u00e4rker sig genom sin anv\u00e4ndarv\u00e4nlighet. Det har dessutom en f\u00f6rm\u00e5ga att skapa plattformsoberoende applikationer som ser ut och k\u00e4nns som inhemska applikationer. Det erbjuder en rik upps\u00e4ttning av f\u00f6rdesignade UI-komponenter som \u00e4r optimerade f\u00f6r mobila enheter och som kan anpassas f\u00f6r att passa applikationens behov. Ut\u00f6ver detta s\u00e5 finns det \u00e4ven funktioner som FastClick-st\u00f6d<\/a>, som hj\u00e4lper till att ta bort f\u00f6rdr\u00f6jningar i ber\u00f6ringsh\u00e4ndelser, och lat laddning, som g\u00f6r att applikationen laddas snabbare.<\/p>\n H\u00e4r \u00e4r ett exempel p\u00e5 ett kod-utdrag som visar hur man skapar en enkel knapp med hj\u00e4lp av Onsen UI:<\/p>\n Den h\u00e4r koden skapar en knapp med texten ”Click me!” och modifieringsklassen Komponentbibliotek \u00e4r numera allm\u00e4nt accepterade som standardpraxis inom webbutveckling. De har hj\u00e4lpt Angular att bli ett av de mest popul\u00e4ra och allm\u00e4nt anv\u00e4nda ramverken f\u00f6r frontend-utveckling. Detta har bland annat blivit verklighet tack vare ett bekv\u00e4mt och effektivt s\u00e4tt att utveckla UI-komponenter.<\/p>\n Biblioteken ovan erbjuder f\u00f6rbyggda och anpassningsbara UI-komponenter som hj\u00e4lper utvecklare att skapa h\u00f6gkvalitativa och konsekventa anv\u00e4ndargr\u00e4nssnitt med mindre anstr\u00e4ngning. I slut\u00e4ndan s\u00e5 beror valet av bibliotek p\u00e5 projektets specifika behov och utvecklarens preferenser.<\/p>\n Beh\u00f6ver du ett hem f\u00f6r ditt n\u00e4sta Angular-projekt? Kinsta\u2019s plattformar f\u00f6r applikationshosting<\/a> och databashosting<\/a> \u00e4r l\u00f6sningar som \u00e4r redo att servera din applikation till v\u00e4rlden.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular \u00e4r ett JavaScript-ramverk med \u00f6ppen k\u00e4llkod. Det bygger p\u00e5 TypeScript och \u00e4r optimerat f\u00f6r att utveckla webb-applikationer med en enda sida. Angular \u00e4r v\u00e4lk\u00e4nt f\u00f6r …<\/p>\n","protected":false},"author":117,"featured_media":52128,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[756],"class_list":["post-51515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager eller med hj\u00e4lp av Angular\u2019s eget kommandoradsgr\u00e4nssnitt (CLI).<\/p>\nVad g\u00f6r ett bra komponentbibliotek till ett bra bibliotek?<\/h2>\n
\n
9 smarta Angular-komponentbibliotek<\/h2>\n
1. Angular Material<\/h3>\n
![\"Material](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> och anpassa detta efter behov.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"NG-Bootstrap](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code> Modal s\u00e5 kan utvecklare enkelt skapa modala dialogrutor med anpassningsbara alternativ som storlek, bakgrund och tangentbordsst\u00f6d.<\/p>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">Modal title<\/h4>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n <span aria-hidden=\"true\">×<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">\n <p>Modal body text goes here.<\/p>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"modal.close('Close click')\">Close<\/button>\n <\/div>\n<\/ng-template>\n<button class=\"btn btn-primary\" (click)=\"open(content)\">Launch demo modal<\/button><\/code><\/pre>\nng-template<\/code> inneh\u00e5llet f\u00f6r den modala dialogen. Detta inkluderar exempelvis sidhuvud, kropp och sidfot. Knappelementet i slutet av kod-utdraget utl\u00f6ser \u00f6ppnandet av modaldialogen n\u00e4r det klickas p\u00e5. Metoden open()<\/code> anv\u00e4nds f\u00f6r att visa den modala dialogen och tar elementet ng-template<\/code> som argument.<\/p>\n3. Clarity<\/h3>\n
![\"Illustration](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-clarity.png\")
<clr-input-container>\n <label>Username<\/label>\n <input clrInput placeholder=\"Enter your username\">\n<\/clr-input-container><\/code><\/pre>\nclr-input-container<\/code> och clrInput<\/code> tillhandah\u00e5lls av Clarity-biblioteket och kommer att styla inmatningsf\u00e4ltet i enlighet med detta.<\/p>\n4. Kendo UI<\/h3>\n
![\"Exempel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-kendo-ui-data-grid.png\")
<kendo-grid [data]=\"gridData\">\n <kendo-grid-column field=\"ProductID\" title=\"Product ID\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"ProductName\" title=\"Product Name\" width=\"200\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitPrice\" title=\"Unit Price\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitsInStock\" title=\"Units In Stock\" width=\"120\"><\/kendo-grid-column>\n<\/kendo-grid><\/code><\/pre>\nkendo-grid<\/code>-komponenten.<\/p>\n5. PrimeNG<\/h3>\n
![\"Officiell](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> f\u00f6r en komponent till true<\/code>. Komponenten kommer sedan att anv\u00e4nda \u00f6vers\u00e4ttningsfilerna f\u00f6r att visa texten p\u00e5 det spr\u00e5k som anv\u00e4ndaren v\u00e4ljer.<\/p>\np-calendar<\/code> med st\u00f6d f\u00f6r internationalisering i PrimeNG:<\/p>\n<p-calendar [(ngModel)]=\"date\" [showIcon]=\"true\" [readonlyInput]=\"true\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"2000:2030\" [locale]=\"en\"><\/p-calendar><\/code><\/pre>\np-calendar<\/code>-attributet translate<\/code> st\u00e4llts in p\u00e5 true<\/code> och attributet [locale]<\/code> har st\u00e4llts in p\u00e5 spr\u00e5kkoden f\u00f6r engelska (en). Detta s\u00e4kerst\u00e4ller att kalendern visas p\u00e5 engelska f\u00f6r anv\u00e4ndare som har valt det spr\u00e5ket.<\/p>\n6. Nebular<\/h3>\n
![\"Nebular](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code> och danger<\/code>. Men anv\u00e4ndare kan g\u00e5 l\u00e4ngre \u00e4n vad Akveo har beslutat att dessa representerar genom att importera avancerade stylinganpassningar som Sass-filer.<\/p>\nimport { Component, ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n selector: 'nb-accordion-demo',\n templateUrl: '.\/accordion-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionDemoComponent {}<\/code><\/pre>\n<nb-accordion>\n <nb-accordion-item>\n <nb-accordion-item-header>First Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for First Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n <nb-accordion-item>\n <nb-accordion-item-header>Second Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for Second Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n<\/nb-accordion><\/code><\/pre>\ngetDirection()<\/code> och setDirection()<\/code>\u00a0f\u00f6r att uppt\u00e4cka och \u00e4ndra layoutriktningen vid k\u00f6rning.<\/p>\n7. NG-Lightning<\/h3>\n
![\"NG-Lightning](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-lightning-alert.png\")
import { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-demo-alert-basic',\n templateUrl: '.\/basic.html',\n})\nexport class DemoAlertBasic {\n showTopAlert = false;\n\n onClose(reason: string) {\n console.log(`Closed by ${reason}`);\n }\n}<\/code><\/pre>\n<div class=\"slds-notify_container\">\n <ngl-alert *ngIf=\"showTopAlert\" variant=\"warning\" iconName=\"warning\" (close)=\"onClose($event); showTopAlert = false;\">\n <h2 class=\"slds-text-heading_small\">\n Your browser is outdated. Your Salesforce experience may be degraded.\n <a href=\"javascript:void(0);\">More Information<\/a>\n <\/h2>\n <\/ngl-alert>\n<\/div>\n\n<ngl-alert class=\"slds-theme_alert-texture\" variant=\"offline\" iconName=\"offline\" (close)=\"onClose('click')\">\n <h2>You are in offline mode.<a href=\"javascript:void(0);\">More Information<\/a><\/h2>\n<\/ngl-alert>\n\n<ngl-alert class=\"slds-m-top_small\" variant=\"error\">Your browser is currently not supported.<\/ngl-alert>\n\n<button class=\"slds-m-top_medium\" type=\"button\" [disabled]=\"showTopAlert\" nglButton (click)=\"showTopAlert = true\">Show alert in container<\/button><\/code><\/pre>\n8. Syncfusion UI<\/h3>\n
![\"Syncfusion](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-syncfusion-cards.png\")
<ejs-grid [dataSource]=\"data\">\n <e-columns>\n <e-column field=\"OrderID\" headerText=\"Order ID\" textAlign=\"Right\" width=\"120\"><\/e-column>\n <e-column field=\"CustomerID\" headerText=\"Customer Name\" width=\"150\"><\/e-column>\n <e-column field=\"Freight\" headerText=\"Freight\" textAlign=\"Right\" format=\"C2\" width=\"120\"><\/e-column>\n <e-column field=\"ShipCity\" headerText=\"Ship City\" width=\"150\"><\/e-column>\n <\/e-columns>\n<\/ejs-grid><\/code><\/pre>\ndataSource<\/code> \u00e4r inst\u00e4lld p\u00e5 de data som ska visas och elementet e-columns<\/code> anv\u00e4nds f\u00f6r att definiera kolumnerna i rutn\u00e4tet. Varje e-column<\/code>-element definierar en kolumn i rutn\u00e4tet, inklusive f\u00e4ltet som ska visas, rubriktexten och kolumnbredden. Exemplet visar dessutom hur man formaterar de data som visas i rutn\u00e4tet med hj\u00e4lp av attributet format<\/code>.<\/p>\n9. Onsen UI<\/h3>\n
![\"Exempel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-onsen-ui-lists.png\")
<ons-button modifier=\"large--cta\">Click me!<\/ons-button><\/code><\/pre>\nlarge--cta<\/code>, som \u00e4ndrar knappens utseende till en st\u00f6rre storlek med en f\u00e4rg som \u00e4r l\u00e4mplig f\u00f6r en CTA-knapp.<\/p>\n\nSammanfattning<\/h2>\n