Angular

Callbacks

<some-modal-tag [callbackMethod]="parentComponentMethod()"><some-modal-tag/>

@Input: callbackMethod;
  onDismiss(){
  callbackMethod();
}

parentComponentMethod() {
 return () => {
  // Your code here
 }
}

Links

https://www.bennadel.com/blog/3217-defining-function-and-callback-interfaces-in-typescript.htm

https://octoperf.com/blog/2016/04/03/angular2-typescript-callback-typing/

https://stackoverflow.com/questions/42808436/angular-2-input-binding-to-callback-method-reference

Change detection

Links

https://angular.io/api/core/ChangeDetectorRef

Custom Context Menu

Links

https://medium.com/@sheepczx/how-to-create-a-context-menu-in-angular-2-9c9b502687f1

Custom Form Controls

Custom Select Component

Links

https://angular.io/api/forms/SelectControlValueAccessor

https://blog.angulartraining.com/tutorial-custom-form-controls-with-angular-22fc31c8c4cc

https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Daten zwischen Komponenten austauschen

Links

https://angular.io/guide/component-interaction

EventEmitter

Links

https://angular.io/api/core/EventEmitter

Icons

npm install font-awesome --save

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/angular-fontawesome

"styles": [
  ...
  "node_modules/font-awesome/css/font-awesome.min.css",
  ...
],

Im Modul:

...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  ...,
  imports: [
    ...,
    FontAwesomeModule
  ],
  ...
})
export class AppModule {
  constructor() {
    /* Add an icon to the library for convenient access in other components */
    library.add(faCoffee);
  }
}

In der Komponente:

<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

Links

https://github.com/FortAwesome/angular-fontawesome#usage

https://fontawesome.com/free

Links Installation

https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons

JQuery

npm install jquery --save

"scripts": [
  ...
  "./node_modules/jquery/dist/jquery.min.js" 
  ...
]

import * as $ from 'jquery';

Links

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

Menü beim Scrollen ausblenden

import { ..., HostListener, ... } from '@angular/core';

  prevScrollpos = 0;

  ...

  @HostListener('window:scroll', ['$event'])
  scrollHandler(event) {
    const currentScrollPos = window.pageYOffset;

    if ((currentScrollPos < 55) || (this.prevScrollpos > currentScrollPos)) {
      document.getElementById('nav-bar').style.top = '0';
    } else {
      document.getElementById('nav-bar').style.top = '-50px';
    }

    this.prevScrollpos = currentScrollPos;
  }

#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  transition: top 0.5s;
}

Links

https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

https://angular.io/api/core/HostListener

Routing

Sub-Routing

Links

https://www.w3schools.com/angular/default.asp

Probleme

'Access-Control-Allow-Origin' header is present on the requested resource.

Siehe Tomcat installation per apt-get bzw. Spring Security (CORS)

Visual Studio Code is unable to watch for file changes in this large workspace

Die Datei sysctl.conf bearbeiten

sudo vi /etc/sysctl.conf

und am Ende folgende Zeile hinzufügen:

fs.inotify.max_user_watches=524288

Danach neuen Wert mit folgenden Befehl laden:

sudo sysctl -p

Neues Limit überprüfen:

cat /proc/sys/fs/inotify/max_user_watches

Zurück zu JavaScript