Mostrando postagens com marcador Angular. Mostrar todas as postagens
Mostrando postagens com marcador Angular. Mostrar todas as postagens

domingo, 5 de julho de 2020

TypeScript 3.7: Optional Chaining and Nullish Coalescing

This new features are very interesting because maintain our code cleaner.

The Optional Chaining ( ? operator ) it was already used in Angular templates.

The Nullish Coalescing ( ?? operator ) is similar to || operator, the differences is explained here TypeScript 3.7 - What's New

Sources:
TypeScript 3.7 - What's New

(Portugues video) Angular: Novidades Angular v9 Ivy: TypeScript 3.7 (optional chaining e coalescência nula)

sábado, 4 de julho de 2020

Angular v9 @NgModule.entryComponents is deprecated

The property entryComponents of the NgModule is an array with components that can be dynamically loaded into the view (as modals). 

In Angular v9 Ivy, it's no longer needed and can be removed in v11. 

In theory it's doing like the java does since the beginning, checking components imported and used into code to generate the deploy bundle.

Source (Portuguese video):
Angular: Novidades Angular v9 Ivy: Depreciação do entryComponents


terça-feira, 23 de janeiro de 2018

Angular 2 - Build fails using PrimeNG

In one application I am using PrimeNG, a framework of Angular components very complete. I am using the version 5.2.0-rc.1.

After created some screens I was do the production build (ng build --prod), but appears errors like this: Unexpected value 'TableModule in. Appears to DropdownModule too. Developer build (--dev) works fine.

Looking in the web I found the solution in this link: 
https://github.com/primefaces/primeng/issues/4841 in the last post from patriknil90. 

In short is necessary to create a .d.ts file to each component that you use. Changing the primeng.d.ts does not work, it has already the statement to dropdown.


P.S.: the version 5.2.0-rc.2 was released on jan 23rd and this issue was fixed.

sexta-feira, 22 de setembro de 2017

Focus and move cursor in Angular

HTML5 brings the autofocus attribute to the input tag.
This attribute works fine when the page is loaded the first time, but in some moments is necessary put the focus in runtime, e.g. after a validation.

In AngularJS I use the code below (unfortunately I did not save the link from where I copied it to thank):

function cursorToEnd(input) {
    input.focus();

    // If this function exists...
    if (input.setSelectionRange) {
        // ... then use it (Doesn't work in IE)
        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(input).val().length * 2;

        input.setSelectionRange(len, len);
    } else {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(input).val($(input).val());
    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    input.scrollTop = 999999;        
}

function focus(jQueryObject) {
    setTimeout(function() {
        cursorToEnd(jQueryObject);
    }, 500);
};

In my apps using Angular 4 I rewrite it to:

  cursorToEnd(input: ElementRef) {
    input.nativeElement.focus();

    if (input.nativeElement.setSelectionRange) {
      const len = input.nativeElement.value.length * 2;
      input.nativeElement.setSelectionRange(len, len);
    }

    input.nativeElement.scrollTop = 999999;
  }

  focus(input: ElementRef) {
      setTimeout(() => this.cursorToEnd(input), 300);
  }


Fast tip: App builded with Angular 4 does not works with Internet Explorer

This is because you need to import js files additional.
To work, check the polyfills.ts file and uncomment the required lines.