TypeScript angular2/core Renderer Examples

Programming Language: TypeScript

Namespace/Package Name: angular2/core

Class/Type: Renderer

Examples at hotexamples.com: 30

The typescript angular2.core Renderer is a library used in Angular 2 projects to manipulate the DOM and render elements dynamically. It provides a set of methods such as createElement, createElementNS, createText, setElementProperty, and setElementClass which allow developers to modify HTML elements on the fly.

One example of using the Renderer library could be adding a class to an element dynamically based on a user action, without directly accessing the DOM. The following code creates a button element and sets a click event listener to it. When the button is clicked, the Renderer adds a 'clicked' class to the element.

import { Component, Renderer } from '@angular/core';

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent {
  constructor(private renderer: Renderer) {}

  onClick() {
    const btn = this.renderer.createElement('button');
    this.renderer.setElementClass(btn, 'clicked', true);
  }
}

Another use case for the Renderer library is creating SVG elements dynamically. The library provides a method called `createElementNS` which allows developers to create SVG elements in addition to HTML elements. The following code creates a circular SVG element using the Renderer library.

import { Component, Renderer } from '@angular/core';

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent {
  constructor(private renderer: Renderer) {}

  ngOnInit() {
    const circle = this.renderer.createElementNS('http://www.w3.org/2000/svg', 'circle');
    this.renderer.setElementAttribute(circle, 'r', '50');
    this.renderer.setElementAttribute(circle, 'cx', '50');
    this.renderer.setElementAttribute(circle, 'cy', '50');
    this.renderer.setElementStyle(circle, 'fill', 'red');
    this.renderer.setElementStyle(circle, 'stroke', 'black');
    this.renderer.setElementProperty(svg, 'appendChild', [circle])
  }
}

The Renderer library is included in the @angular/core package. Developers can import the Renderer class from this package and use it in their components.

TypeScript Renderer - 30 examples found. These are the top rated real world TypeScript examples of angular2/core.Renderer extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

setElementStyle(30)

setElementClass(17)

setElementAttribute(9)

invokeElementMethod(4)

selectRootElement(4)

setText(4)

createElement(3)

listenGlobal(2)

createText(1)

Example #1

Show file

File: form.bootstrap.ts Project: Sarvesh19/restlet-sample-angular2-forms

 constructor(el: ElementRef, renderer: Renderer) {
   renderer.setElementClass(el.nativeElement, 'btn', true);
   renderer.setElementClass(el.nativeElement, 'btn-primary', true);
 }

Example #2

Show file

File: auto-grow.directive.ts Project: gdebojyoti/angular2-seed

 onFocus() {
     this.rnd.setElementStyle(this.el.nativeElement, 'width', '200');
 }

Example #3

Show file

File: auto-grow.directive.ts Project: applecool/Angular-Projects

 onFocus(){
     this.renderer.setElementStyle(this.ele.nativeElement, 'width','200');
 }

Example #4

Show file

File: auto-grow.directive.ts Project: maxotek/angular2-learn1

 onBlur() {
     this.renderer.setElementStyle(this.el.nativeElement, "width", "120");
 }

Example #5

Show file

File: auto-grow.directive.ts Project: jforjohn/cern_projects

 onBlur(){
   this.renderer.setElementStyle(this.el.nativeElement, 'width', '300px');
 }

Example #6

Show file

File: AnimationComponent.ts Project: wanliyuan/dwy-angular2starter

 this.getAnimateClassName().forEach((item:string)=>{
   this.renderer.setElementClass(this.elRef,item, true);
 });

Example #7

Show file

File: AnimationComponent.ts Project: wanliyuan/dwy-angular2starter

 ngOnDestroy() {
   this.renderer.setElementClass(this.elRef, 'in', false);
 }

Example #8

Show file

File: styled.ts Project: Cathje/begroting_frontend

    constructor(public el: ElementRef, public renderer: Renderer) {
        renderer.setElementStyle(el.nativeElement, 'backgroundColor', sessionStorage.getItem("mainColor"));
        renderer.setElementStyle(el.nativeElement, 'border', 'none');

    }

Example #9

Show file

File: auto-grow.directive.ts Project: andivanov/learning-angular-2

 onBlur() {
     this.renderer.setElementStyle(this.el.nativeElement, 'width', 'auto')
 }

Example #10

Show file

File: app.component.ts Project: Niaro/trood-demo

 // TypeScript public modifiers
 constructor(public appState: AppState, public router: Router, private _element: ElementRef, private _renderer: Renderer) {
   _renderer.setElementClass(_element.nativeElement, 'initializing', true);
 }

Show more examples