Hvorfor bruge et komponentbibliotek?<\/h2>\n
Uanset om du selv bygger dem eller anvender biblioteker fra tredjeparter, udg\u00f8r komponenter fundamentet for Angular-applikationer. Hver komponent er afh\u00e6ngig af en skabelon for dens HTML- og CSS-elementer og TypeScript-kode, der styrer dens adf\u00e6rd.<\/p>\n
Den vigtigste fordel ved komponentbiblioteker er, at de leverer genanvendelige, f\u00e6rdigbyggede brugergr\u00e6nsefladekomponenter, hvilket reducerer behovet for brugerdefineret kode og hj\u00e6lper udviklere med at f\u00e5 applikationer hurtigt op at k\u00f8re.<\/p>\n
Angular’s tilgang til komponenter kan ogs\u00e5 forbedre samarbejdet p\u00e5 tv\u00e6rs af teamet mellem programm\u00f8rer, der m\u00e5ske skriver TypeScript-kode, og webdesignere, der leverer HTML-koden til skabelonerne.<\/p>\n
Biblioteker af komponenter tilf\u00f8jes typisk til Angular-projekter ved hj\u00e6lp af Node.js Komponentbibliotekerne p\u00e5 vores liste er blevet udvalgt ud fra flere kriterier:<\/p>\n Lad os nu tage et n\u00e6rmere kig p\u00e5 vores valg.<\/p>\n Angular Material<\/a> er det officielle Angular-komponentbibliotek, der tilbyder en omfattende UI-samling og samtidig holder sig ajour med de seneste Angular-funktioner og API-\u00e6ndringer. Det tilbyder ogs\u00e5 indbygget underst\u00f8ttelse af tilg\u00e6ngelighed og genererer markup for at muligg\u00f8re tastaturnavigation og vejlede hj\u00e6lpeteknologier som sk\u00e6rml\u00e6sere.<\/p>\n S\u00e5dan fungerer det:<\/strong> Angular Material udnytter Angular’s indbyggede direktiver og tjenester til at levere et s\u00e6t databundne og performante komponenter oven p\u00e5 Angular, hvilket g\u00f8r det nemt at tilf\u00f8je interaktivitet til webapplikationer.<\/p>\n Hvor det excellerer:<\/strong> Angular Material excellerer i at levere forudbyggede UI-komponenter, der f\u00f8lger Material Design-retningslinjerne. Det tilbyder et s\u00e6t veldesignede og tilpassede brugergr\u00e6nsefladekomponenter, der nemt kan integreres i Angular-applikationer. Disse komponenter omfatter navigationsmenuer, knapper, formularer, dialogbokse og meget mere.<\/p>\n Hvis du f.eks. \u00f8nsker at tilf\u00f8je en knapkomponent til din applikation, kan du blot bruge Her er et eksempel p\u00e5 et kodestykke:<\/p>\n Denne kode vil generere en knapkomponent med det prim\u00e6re farveskema. Du kan tilpasse knappen yderligere ved at tilf\u00f8je event handlers, \u00e6ndre teksten og ikonets udseende.<\/p>\n NG-Bootstrap<\/a> er et open source-bibliotek, der er bygget oven p\u00e5 Bootstrap CSS, og som leverer komponenter og designm\u00f8nstre, som mange udviklere allerede er bekendt med. Dette reducerer indl\u00e6ringskurven for nye projekter og g\u00f8r det til et p\u00e5lideligt valg til at bygge Angular-applikationer hurtigt og effektivt.<\/p>\n S\u00e5dan fungerer det: <\/strong>NG-Bootstrap udvider Bootstrap-komponenternes muligheder ved at give udviklere mulighed for at bruge dem som Angular-direktiver med tovejs databinding og andre Angular-specifikke funktioner. Dette g\u00f8r det nemt for udviklere at skabe responsive, mobilvenlige webapplikationer, der fungerer problemfrit med Angular.<\/p>\n Der hvor den udm\u00e6rker sig:<\/strong> En af de vigtigste styrker ved NG-Bootstrap er underst\u00f8ttelsen af tilg\u00e6ngelighedsfunktioner, herunder W3C’s specifikationer for tilg\u00e6ngelige rige internetapplikationer (ARIA), hvilket g\u00f8r det lettere for udviklere at skabe applikationer, der kan bruges af handicappede. NG-Bootstrap udm\u00e6rker sig ogs\u00e5 p\u00e5 omr\u00e5det for modale dialoger. Med Her er et eksempel p\u00e5, hvordan man opretter en grundl\u00e6ggende modal dialogboks ved hj\u00e6lp af NG-Bootstrap:<\/p>\n I dette eksempel indeholder Clarity<\/a> er et open source-bibliotek, der anvender et f\u00e6lles visuelt sprog p\u00e5 tv\u00e6rs af sine komponenter for at give en konsistent, intuitiv brugergr\u00e6nseflade. Det er ogs\u00e5 udf\u00f8rligt dokumenteret med mange vejledninger, tutorials og API-referencer, hvilket g\u00f8r det let at l\u00e6re og bruge.<\/p>\n S\u00e5dan fungerer det:<\/strong> Clarity-designsystemet er baseret p\u00e5 begrebet “kort”, som bruges til at gruppere relateret indhold. Kort bruges til at repr\u00e6sentere individuelle stykker indhold p\u00e5 en struktureret og organiseret m\u00e5de. Clarity tilbyder en r\u00e6kke kortkomponenter, der kan pr\u00e6sentere data i en r\u00e6kke forskellige formater. Disse kortkomponenter omfatter headers, footers og indholdssektioner og kan nemt tilpasses med forskellige stilarter og temaer.<\/p>\n Kortene kan ogs\u00e5 kombineres med andre komponenter – f.eks. modaler, dropdowns og knapper – for at skabe mere komplekse UI-designs. Det overordnede m\u00e5l med det kortbaserede design er at give et fleksibelt og modul\u00e6rt system til at skabe komplekse gr\u00e6nseflader med lethed.<\/p>\n Der hvor det excellerer:<\/strong> Claritys omfattende s\u00e6t af formularkontroller er en klar styrke. Disse kontroller omfatter indtastningsfelter, markeringsfelter, radioknapper og meget mere. Clarity tilbyder ogs\u00e5 et s\u00e6t datavisualiseringer, s\u00e5som s\u00f8jlediagrammer, linjediagrammer og cirkeldiagrammer, som hj\u00e6lper med at vise data p\u00e5 en klar og organiseret m\u00e5de.<\/p>\n Her er et eksempel p\u00e5, hvordan du kan bruge Clarity-inputfeltkomponenten i en HTML-formular:<\/p>\n Denne kode vil oprette et formularindtastningsfelt med en etiket og en pladsholdertekst. Direktiverne Kendo UI<\/a> er et kommercielt bibliotek, der er bygget med ydeevne for \u00f8je, hvilket sikrer hurtige indl\u00e6sningstider og en j\u00e6vn brugeroplevelse. Det tilbyder ogs\u00e5 temaer og stilindstillinger til at forbedre udseendet og indtrykket af din applikation samt omfattende dokumentation og et dedikeret supportteam.<\/p>\n S\u00e5dan fungerer det:<\/strong> Kendo UI bruger teknikker som virtualisering og lazy loading for at sikre hurtige indl\u00e6sningstider og en j\u00e6vn brugeroplevelse. Det betyder, at applikationer, der er bygget med Kendo UI, er hurtige og responsive, selv n\u00e5r der er tale om store datas\u00e6t. Kendo UI f\u00f8lger ogs\u00e5 en modul\u00e6r arkitektur, der g\u00f8r det muligt for udviklere kun at bruge de komponenter, de har brug for, hvilket reducerer bibliotekets st\u00f8rrelse og forbedrer ydeevnen.<\/p>\n Hvor det excellerer:<\/strong> Kendo UI er s\u00e6rligt velegnet til applikationer p\u00e5 virksomhedsniveau, der kr\u00e6ver omfattende datah\u00e5ndtering og komplekse brugerinteraktioner. Dens gitterkomponent underst\u00f8tter f.eks. funktioner som filtrering, sortering og gruppering, s\u00e5 udviklerne kan pr\u00e6sentere store datas\u00e6t for brugerne p\u00e5 en overskuelig m\u00e5de.<\/p>\n Her er et kodestykke af, hvordan du opretter et simpelt Kendo UI-grid i HTML:<\/p>\n Denne kode vil vise et Kendo UI-gitter i din Angular-applikation. Du kan tilpasse gitteret ved at videregive forskellige konfigurationsindstillinger til PrimeNG<\/a> er et open source-bibliotek, der er designet med henblik p\u00e5 brugervenlighed og tilpasning. Det indeholder ogs\u00e5 avancerede tilg\u00e6ngelighedsfunktioner og underst\u00f8ttelse af internationalisering, hvilket g\u00f8r det til et godt valg til globale applikationer.<\/p>\n S\u00e5dan fungerer det:<\/strong> PrimeNG-biblioteket indeholder et s\u00e6t f\u00e6rdigbyggede UI-komponenter, som udviklere nemt kan integrere i deres Angular-applikationer. Det bruger Angular’s indbyggede direktiver og livscyklushooks til at give en problemfri integration med rammen. Det underst\u00f8tter ogs\u00e5 forskellige konfigurationsmuligheder og tilpasninger, s\u00e5 udviklere kan tilpasse komponenterne til deres specifikke behov.<\/p>\n Hvor den udm\u00e6rker sig:<\/strong> En af de vigtigste funktioner i PrimeNG er dens internationaliseringsunderst\u00f8ttelse. Biblioteket underst\u00f8tter flere sprog og tilbyder overs\u00e6ttelsestjenester for de fleste af dets komponenter. Dette opn\u00e5s ved hj\u00e6lp af Angular’s lokaliseringsramme og meddelelsesfiler, som nemt kan tilpasses og opdateres.<\/p>\n For at bruge internationalisering i PrimeNG skal du oprette overs\u00e6ttelsesfiler for de sprog, du \u00f8nsker at underst\u00f8tte. Disse filer skal indeholde overs\u00e6ttelser for alle de komponenter, du \u00f8nsker at bruge i din applikation. For at aktivere internationalisering i PrimeNG skal du indstille Her er et eksempel p\u00e5, hvordan du kan bruge komponenten I dette eksempel er Nebular<\/a> er en samling af mere end 40 Angular UI-komponenter, der er tilg\u00e6ngelige i fire temaer, der kan tilpasses. Biblioteket, der er skabt af webudviklingsfirmaet Akveo, leveres ogs\u00e5 med et brugerautentifikationsmodul og et ACL-baseret sikkerhedsmodul til at kontrollere mere granul\u00e6r adgang til specifikke ressourcer. Akveo kan ogs\u00e5 f\u00e5 dig i gang med at lave din egen applikation til administration af et dashboard med ngx-admin<\/strong>-s\u00e6ttet, der er bygget ved hj\u00e6lp af Nebular-moduler.<\/p>\n S\u00e5dan fungerer det:<\/strong> Nebular’s UI-tilgang er baseret p\u00e5 specifikationerne i Akveos Eva Design System<\/a>, hvortil der ogs\u00e5 leveres aktiver til teams, hvis arbejde begynder med designv\u00e6rkt\u00f8jer som Sketch eller Figma.<\/p>\n Designere, der arbejder med Nebulars CSS, kan generelt henvise til stylingmuligheder semantisk – f.eks. farvevariablerne Nebulars bibliotek af komponenter omfatter layouts, kort, lister, harmonikaer, navigationshj\u00e6lpemidler, formularelementer, datatabeller, modaler og overlejringer samt widgets som spinnere, datov\u00e6lgere og fremskridtsbj\u00e6lker.<\/p>\n Metadataene for en Nebular harmonikakomponent kan se s\u00e5ledes ud TypeScript:<\/p>\n Og dens skabelon kan se s\u00e5dan ud:<\/p>\n Hvor den udm\u00e6rker sig: <\/strong>Nebular-biblioteket og ngx-admin<\/strong> admin dashboard-s\u00e6ttet er gratis at bruge, s\u00e5 det er et stort plus for en s\u00e5 sofistikeret samling af v\u00e6rkt\u00f8jer. Godkendelses- og sikkerhedsmodulerne afspejler Akveos fokus p\u00e5 disse komponenter til administrationspanelet.<\/p>\n Nebular har ogs\u00e5 st\u00e6rk underst\u00f8ttelse af sprog, der l\u00e6ser fra h\u00f8jre til venstre (RTL). Brugerne vil finde CSS-markup til underst\u00f8ttelse af RTL- (og LTR-) layouts og metoder – som NG-Lightning<\/a> er en interessant tilf\u00f8jelse til komponentbiblioteket, da det er en implementering af Salesforce Lightning Design System<\/a> (LDS) med Angular-pr\u00e6g. Dette system leverer HTML- og CSS-elementer – blueprints – og designretningslinjer for Salesforce-udviklere, der bruger platformens Lightning-ramme. De vigtigste elementer i LDS er afspejlet i denne open source-samling af Angular-widgets, herunder HTML og CSS.<\/p>\n S\u00e5dan fungerer det:<\/strong> NG-Lightning har afh\u00e6ngigheder, der adskiller det fra nogle af de andre komponentbiblioteker. Ud over at v\u00e6re afh\u00e6ngige af det officielle Angular Component Dev Kit<\/a>, linker NG-Lightning-applikationer til de samme CSS-repositorier, som Salesforce LDS bruger. CSS kan downloades fra det officielle Salesforce UX-repositorium<\/a> eller linkes via et CDN.<\/p>\n Alligevel vil den TypeScript-baserede tilgang til opbygning af visninger v\u00e6re velkendt for Angular-udviklere. Dette eksempel ville starte metadataene for den ovenfor viste advarselskomponent:<\/p>\n Komponentskabelonen for det officielle NG-Lightning-eksempel er:<\/p>\n Hvor den udm\u00e6rker sig:<\/strong> NG-Lightnings udviklere tager webtilg\u00e6ngelighed alvorligt, hvilket afspejler deres forankring i Salesforce LDS. Dynamisk genererede gr\u00e6nseflader, som er kendetegnende for frameworks som Angular, kan ofte v\u00e6re en udfordring for slutbrugere med synshandicap eller bev\u00e6gelseshandicap. NG-Lightning overholder W3C’s retningslinjer for ARIA-specifikationer og genererer web-markup, der er designet til at underst\u00f8tte hj\u00e6lpeteknologier som f.eks. sk\u00e6rml\u00e6sere.<\/p>\n Syncfusion UI<\/a> er et letv\u00e6gts, modul\u00e6rt bibliotek, der g\u00f8r det muligt for udviklere kun at v\u00e6lge de n\u00f8dvendige komponenter til deres applikation og reducere den samlede st\u00f8rrelse af det endelige bundle. Dette g\u00f8r det nemt at vedligeholde, udvide og opdatere biblioteket ved at tilf\u00f8je nye komponenter eller \u00e6ndre eksisterende komponenter uden at p\u00e5virke de andre.<\/p>\n S\u00e5dan fungerer det:<\/strong> N\u00e5r en side indl\u00e6ses, initialiserer og opretter Syncfusion UI-biblioteket de n\u00f8dvendige komponenter p\u00e5 baggrund af markup og konfigurationsindstillinger. For eksempel giver gitterkomponenten brugerne mulighed for at sortere, filtrere og gruppere data, mens diagramkomponenten kan vise data i en r\u00e6kke forskellige formater, herunder linje-, s\u00f8jle- og cirkeldiagrammer.<\/p>\n Biblioteket indeholder ogs\u00e5 et s\u00e6t hj\u00e6lpefunktioner og v\u00e6rkt\u00f8jer, der kan bruges til at forenkle almindelige opgaver, f.eks. datamanipulation og validering. Biblioteket indeholder en datah\u00e5ndtering, der kan bruges til at arbejde med komplekse datastrukturer, og en valideringsmotor, der kan bruges til at validere brugerinput.<\/p>\n Her udm\u00e6rker det sig:<\/strong> Syncfusion tilbyder et robust s\u00e6t v\u00e6rkt\u00f8jer til tilpasning og tematisering, s\u00e5 udviklerne hurtigt kan skabe en ensartet og professionelt udseende brugergr\u00e6nseflade. Biblioteket indeholder et kraftfuldt s\u00e6t API’er og begivenheder, der kan bruges til at skabe brugerdefineret funktionalitet og interaktivitet, samt underst\u00f8ttelse af popul\u00e6re datakilder som REST API’er, OData og SignalR.<\/p>\n Her er et eksempel p\u00e5 at inkludere en Syncfusion grid-komponent i en Angular-applikation:<\/p>\n Denne kode skaber et simpelt gitter, der viser data fra en datakilde. Egenskaben Onsen UI<\/a> er et popul\u00e6rt open source UI-bibliotek til opbygning af hybrid- og webmobilapplikationer. Det giver en bedre s\u00f8ml\u00f8s integration med popul\u00e6re frontend<\/a>-frameworks\u00a0end andre biblioteker fra tredjeparter, hvilket g\u00f8r det nemt at skabe interaktive brugergr\u00e6nseflader af h\u00f8j kvalitet med minimal indsats.<\/p>\n S\u00e5dan fungerer det:<\/strong> Onsen UI er baseret p\u00e5 Googles Material Design-filosofi, hvilket sikrer, at applikationens brugergr\u00e6nseflade er b\u00e5de \u00e6stetisk tiltalende og brugervenlig. Det giver et omfattende s\u00e6t indbyggede temaer, der kan anvendes p\u00e5 komponenterne for at forbedre applikationens udseende og f\u00f8lelse.<\/p>\n Der, hvor den udm\u00e6rker sig:<\/strong> Onsen UI udm\u00e6rker sig ved sin brugervenlighed og evne til at skabe applikationer p\u00e5 tv\u00e6rs af platforme, der ser ud og f\u00f8les som native apps. Det giver et rigt s\u00e6t af foruddesignede UI-komponenter, der er optimeret til mobile enheder og kan tilpasses til applikationens behov. Den indeholder ogs\u00e5 funktioner som FastClick-underst\u00f8ttelse<\/a>, der hj\u00e6lper med at fjerne forsinkelser i ber\u00f8ringsh\u00e6ndelser, og lazy loading, der giver mulighed for hurtigere indl\u00e6sningstider for applikationen.<\/p>\n Her er et eksempel p\u00e5 et kodestykke, der viser, hvordan man opretter en simpel knap ved hj\u00e6lp af Onsen UI:<\/p>\n Denne kode vil oprette en knap med teksten “Click me!” og modificeringsklassen Komponentbiblioteker er nu bredt accepteret som standardpraksis inden for webudvikling. Komponentbiblioteker har hjulpet Angular med at blive et af de mest popul\u00e6re og udbredte frontend-udviklingsframeworks ved at give en praktisk og effektiv m\u00e5de at udvikle UI-komponenter p\u00e5.<\/p>\n Ovenst\u00e5ende biblioteker leverer forudbyggede og tilpassede UI-komponenter, der hj\u00e6lper udviklere med at skabe konsistente brugergr\u00e6nseflader af h\u00f8j kvalitet med mindre besv\u00e6r. I sidste ende vil valget af bibliotek afh\u00e6nge af projektets specifikke behov og udviklerens pr\u00e6ferencer.<\/p>\n Har du brug for et hjem til dit n\u00e6ste Angular-projekt? Kinsta’s Applikation Hosting<\/a>– og Database Hosting<\/a>-platforme er l\u00f8sninger, der er klar til at servere din applikation for verden.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular er en open source JavaScript-ramme, der er bygget ved hj\u00e6lp af TypeScript og optimeret til udvikling af webapplikationer med en enkelt side. Det er kendt …<\/p>\n","protected":false},"author":117,"featured_media":49602,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[678],"class_list":["post-49601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager eller ved hj\u00e6lp af Angular’s egen kommandolinjeinterface (CLI).<\/p>\nHvad g\u00f8r et godt komponentbibliotek til et godt bibliotek?<\/h2>\n
\n
9 smarte Angular-komponentbiblioteker<\/h2>\n
1. Angular Material<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> -direktivet og tilpasse det efter behov.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code> Modal-komponenten kan udviklere nemt oprette modale dialoger med tilpassede muligheder s\u00e5som st\u00f8rrelse, baggrund og tastaturunderst\u00f8ttelse.<\/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> -elementet indholdet for den modale dialog, herunder header, body og footer. Button-elementet i slutningen af kodestumpen udl\u00f8ser \u00e5bningen af modalboksen, n\u00e5r der klikkes p\u00e5 det. Metoden open()<\/code> bruges til at vise den modale dialog og tager ng-template<\/code> -elementet som argument.<\/p>\n3. Clairty<\/h3>\n
![\"En](\"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> og clrInput<\/code> leveres af Clarity-biblioteket og vil style indtastningsfeltet i overensstemmelse hermed.<\/p>\n4. Kendo UI<\/h3>\n
![\"Screenshot:](\"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
![\"Officielt](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> -attributten for en komponent til true<\/code>. Komponenten vil derefter bruge overs\u00e6ttelsesfilerne til at vise teksten p\u00e5 det sprog, som brugeren v\u00e6lger.<\/p>\np-calendar<\/code> med internationaliseringsst\u00f8tte 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>\ntranslate<\/code> -attributten for p-calendar<\/code> -komponenten indstillet til true<\/code>, og [locale]<\/code> -attributten er indstillet til sprogkoden for engelsk (en). Dette sikrer, at kalenderen vises p\u00e5 engelsk for brugere, der har valgt dette sprog.<\/p>\n6. Nebular<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code> og danger<\/code>. Men brugere kan g\u00e5 videre end det, Akveo har besluttet, at disse repr\u00e6senterer, ved at importere avanceret stylingtilpasning 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> og setDirection()<\/code> – til at registrere og \u00e6ndre layoutretningen p\u00e5 k\u00f8retid.<\/p>\n7. NG-Lightning<\/h3>\n
![\"Screenshot:](\"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
![\"Screenshot:](\"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> er indstillet til de data, der skal vises, og e-columns<\/code> -elementet bruges til at definere kolonnerne i gitteret. Hvert e-column<\/code> -element definerer en kolonne i gitteret, herunder det felt, der skal vises, overskriftsteksten og kolonnebredden. Eksemplet viser ogs\u00e5, hvordan man formaterer de data, der vises i gitteret, ved hj\u00e6lp af attributten format<\/code>.<\/p>\n9. Onsen brugergr\u00e6nseflade<\/h3>\n
![\"Screenshot:](\"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 vil \u00e6ndre knappens udseende til en st\u00f8rre st\u00f8rrelse med en farve, der er egnet til en call-to-action-knap.<\/p>\n\nOpsummering<\/h2>\n