Usando o Renderer2 do Angular 4

Como usar o renderer2 para manipular elementos da UI.

O renderer2 e uma class que podemos usar no Angular para manipulação do DOM como criar, adicionar e remover elementos, nos podemos alterar elementos css, styles e atributos das tags html ou até adicionar um listener a um elemento.

Iniciando

Vamos criar um novo projeto que vai servir de base para os testes.

$ ng new sampleRenderer2
$ cd sampleRenderer2
$ vscode ./

O exemplo que eu vou mostrar aqui usa o renderer2 com uma custom directive do Angular 4 e um elementRef para fazer alterações em uma lista. Dentro da pasta root do projeto vamos adicionar uma nova diretiva do angular.

$ ng g directive directives/cp1

Agora vamos editar o arquivo cp1.directive.ts e edita-lo conforme o exemplo a seguir.

Agora temos que alterar também o arquivo app.componet.ts para capturar a nossa lista e definir um metodo "onBtnClick" para fazer as alterações na lista.

E por último vamos alterar o arquivo app.componet.html conforme o exemplo abaixo.

Uma vez finalizado a edição dos arquivos é só rodar o projeto.

$ ng serve --open

Como você pode ver o "Item 1" foi adicionado pela diretiva cp1 para Adicionar novos items a lista basta clicar no botão "adiciona item".

Conclusão

O renderer2 é uma class onde você pode fazer praticamente todas as operações que você costuma fazer diretamente manipulando o DOM via JavaScript.

Para um melhor entendimento eu subi o projeto de exemplo no meu github aqui.