Als je al een tijdje in de codeerindustrie zit, weet je waarschijnlijk al dat het ontwikkelen van dynamische variaties een behoorlijke taak kan zijn in webapplicaties. Afhankelijk van het programmeerplatform dat je kiest, varieert het niveau van je complexiteit, maar gelukkig kan deze prestatie ook gemakkelijk worden bereikt in Angular 8 en sommige eerdere versies van Angular. In dit artikel bespreken we ngstyle in agular 8.
Sjablooneigenschapssyntaxis in hoekig 8
Voordat we dieper ingaan op het verkennen van alle functies en modules waarmee Angular 8 wordt geleverd, laten we eerst de syntaxis van de eigenschap in Angular 8 bekijken en zien hoe we de kleur van een kleureigenschap in puur Java kunnen veranderen.
let myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // de div bijwerken via zijn eigenschappenLaten we dezelfde taak uitvoeren in Angular 8 door gebruik te maken van de ingebouwde bibliotheken en andere modules.
stijl met de syntaxis van de eigenschap, deze tekst is oranje
Gebruik de syntaxis {property} en verkrijg efficiënt elke code en breng bijna onmiddellijk wijzigingen aan.
In het bovenstaande voorbeeld hebben we rechtstreeks toegang tot de eigenschap stijl van het div-element. In vergelijking met de eigenschappen van het DOM-object en -attribuut is dit anders.
wat is type gieten in java
Met behulp van de ingebouwde Angular 8-kenmerken kunnen we de CSS-elementen toevoegen aan elke klasse van onze keuze. Zie het onderstaande voorbeeld om dit beter te begrijpen.
CSS-klasse die de eigenschapsyntaxis gebruikt, deze tekst is blauw
NgClass en NgStyle in Angular 8
Het is ingebouwd met zowel ngSyntax als ngClass in Angular 8 en deze kunnen voor verschillende doeleinden worden gebruikt. In zekere zin bieden de ingebouwde modules suiker voor het implementeren van wijzigingen aan complexere strings dan andere. Laten we eens kijken naar de syntaxis voor ngStyle in Angular 8.
stijl met ngStyle
In het bovenstaande voorbeeld hebben we gebruik gemaakt van ngStyle in Angular om de dynamiek van meerdere elementen in onze klas te veranderen, terwijl we in dezelfde groep verschillende elementen samen hebben om de gebruiker te helpen de klas aan te passen aan zijn of haar behoefte.
Vervolg op bovenstaand voorbeeld.
hoe je Java-code compileert
stijl met ngStyle + -
Nu je weet wat ngStyle is, laten we eens kijken naar enkele elementen van ngStyle.
reeks klassen reeks klassen object van klassen
ngClass in angular stelt ons ook in staat om op tal van manieren wijzigingen in onze code aan te brengen, zodat dynamische wijzigingen in een handomdraai kunnen worden geïmplementeerd, net als de ngStyle.
Bekijk het onderstaande voorbeeld om ze allebei samen in actie te zien.
importeer {Component} uit '@ angular / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportklasse AppComponent {kleur = 'roze' grootte = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}NgClick in hoekig 8
Nu u de basisfuncties van zowel ngClass als ngStyle kent en wat u kunt bereiken met een van beide of beide in het Angular 8-platform, gaan we het gebruik van ngClick eens bekijken.
hoe u Java-codes compileert
Wat is ngClick?
Als je in een bepaald geval meerdere elementen van een programma aan elkaar moet binden, zodat een enkele taak kan worden uitgevoerd, dan moet je gebruik maken van ngClick.
Het bovenstaande is een voorbeeld van hoe ngClick wordt gebruikt in AngularJS. Als het op Angular8 aankomt, bestaat dezelfde module niet, en daarom moet men gebruik maken van het volgende.
De bovenstaande syntaxis wordt gebruikt om gebeurtenisbinding in Angular8 te vergemakkelijken, waarbij we eerst de naam van de doelgebeurtenis definiëren samen met haakjes en vervolgens een sjabloonverklaring opnemen door zowel citaten als de operator is gelijk aan op te nemen. Zodra deze stappen zijn voltooid, stelt Angular8 een gebeurtenishandler in voor deze gebeurtenis en wanneer deze wordt geactiveerd, wordt deze gebeurtenis uitgevoerd.
Angular8 is niet alleen een van de meest populaire programmeertalen die er zijn, maar het is ook een van de meest dynamische, dankzij het brede scala aan functies. Hiermee komen we aan het einde van dit artikel over NgStyle in hoekig. Ik hoop dat je begrijpt hoe deze werken.
bekijk de door Edureka. Angular is een JavaScript-framework dat wordt gebruikt om schaalbare, zakelijke en performante webtoepassingen aan de clientzijde te maken. Omdat Angular framework-acceptatie hoog is, wordt het prestatiebeheer van de applicatie indirect gestuurd door de gemeenschap, wat leidt tot betere kansen op werk. De Angular Certification Training is bedoeld om al deze nieuwe concepten rond Enterprise Application Development te behandelen.