How to apply javascript events in Angular?

Question

How to apply javascript events in Angular?

Navigation

#1 by (2 votes)

0

I'm having a hard time applying Javascript in my Angular project, I got it right in the configuration to connect the javascript in the project, but come on ...

This is the Javascript file;

var Brewer = Brewer || {};

Brewer.MascaraCpfCnpj = (function() {

    function MascaraCpfCnpj() {
        this.radioTipoPessoa = $('.js-radio-tipo-pessoa');

    }

    MascaraCpfCnpj.prototype.iniciar = function() {
        this.radioTipoPessoa.on('change', onTipoPessoaAlterado.bind(this));
    }

    function onTipoPessoaAlterado(evento) {
        console.log('evento', evento);
    }

    return MascaraCpfCnpj;

}());

$(function() {
    var mascaraCpfCnpj = new Brewer.MascaraCpfCnpj();
    mascaraCpfCnpj.iniciar();
});

And this is the snippet of the Javascript file that was applied to the event;

  <div class="ui-g-12 ui-lg-3 ui-md-6 ui-fluid">
        <label for="id_FISICA">Tipo de Pessoa Física</label>
            <div class="radio">
                <p-radioButton class="js-radio-tipo-pessoa" name="group1" value="Física" id="id_FISICA" [(ngModel)]="tipo" inputId="tipo"></p-radioButton>
            </div>
      </div>
      <div class="ui-g-12 ui-lg-3 ui-md-6 ui-fluid">
        <label for="id_JURIDICA">Tipo de Pessoa Júridica</label>
            <div class="radio">
              <p-radioButton class="js-radio-tipo-pessoa" name="group1" value="Juridica" id="id_JURIDICA" [(ngModel)]="tipo" inputId="tipo"></p-radioButton>
            </div>
      </div>

It was to appear something in the browser console when you click on the radioButton, but nothing appears, nothing at all.

I'm open to suggestions

javascript angular

asked by anonymous 24.01.2018 / 21:17

1 answer

Returning the total with the date in a query with SUM importing backup by terminal MariaDB

score 2 · Accepted Answer

I do not see much sense in using jQuery to do this being that the Angular itself supports this natively.

Using native events, you can construct a form and make a subscribe to it in the following way:

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 5';
  myForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      identifier: ['']
    })
  }

  ngOnInit(){
    this.myForm.controls.identifier.valueChanges.subscribe(
      value => {
        console.log(value);
      }
    )
  }
}

app.component.html

<form [formGroup]="myForm">
  <input formControlName="identifier"> 
</form>