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
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", ... ],
... class="fa fa-user icon" ...
Links
Links Installaion
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
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