Angular: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(→Links) |
|||
| (37 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
== Callbacks == | |||
<pre> | |||
<some-modal-tag [callbackMethod]="parentComponentMethod()"><some-modal-tag/> | |||
@Input: callbackMethod; | |||
onDismiss(){ | |||
callbackMethod(); | |||
} | |||
parentComponentMethod() { | |||
return () => { | |||
// Your code here | |||
} | |||
} | |||
</pre> | |||
=== Links === | |||
[https://www.bennadel.com/blog/3217-defining-function-and-callback-interfaces-in-typescript.htm 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://octoperf.com/blog/2016/04/03/angular2-typescript-callback-typing/] | |||
[https://stackoverflow.com/questions/42808436/angular-2-input-binding-to-callback-method-reference https://stackoverflow.com/questions/42808436/angular-2-input-binding-to-callback-method-reference] | |||
== Change detection == | |||
=== Links === | |||
[https://angular.io/api/core/ChangeDetectorRef https://angular.io/api/core/ChangeDetectorRef] | |||
== Custom Context Menu == | |||
=== Links === | |||
[https://medium.com/@sheepczx/how-to-create-a-context-menu-in-angular-2-9c9b502687f1 https://medium.com/@sheepczx/how-to-create-a-context-menu-in-angular-2-9c9b502687f1] | |||
== Custom Form Controls == | |||
[[Custom Select Component (AngularForm)|Custom Select Component]] | |||
=== Links === | |||
[https://angular.io/api/forms/SelectControlValueAccessor https://angular.io/api/forms/SelectControlValueAccessor] | |||
[https://blog.angulartraining.com/tutorial-custom-form-controls-with-angular-22fc31c8c4cc https://blog.angulartraining.com/tutorial-custom-form-controls-with-angular-22fc31c8c4cc] | |||
[https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control 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 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 https://angular.io/guide/component-interaction] | |||
== EventEmitter == | |||
=== Links === | |||
[https://angular.io/api/core/EventEmitter https://angular.io/api/core/EventEmitter] | |||
== Icons == | == Icons == | ||
[[Icons FontAwesome (Angular)|Icons FontAwesome]] | |||
== JQuery == | |||
<pre> | <pre> | ||
npm install | npm install jquery --save | ||
</pre> | </pre> | ||
<pre> | <pre> | ||
" | "scripts": [ | ||
... | ... | ||
"node_modules/ | "./node_modules/jquery/dist/jquery.min.js" | ||
... | ... | ||
] | ] | ||
</pre> | </pre> | ||
<pre> | <pre> | ||
import * as $ from 'jquery'; | |||
</pre> | </pre> | ||
=== Links === | === Links === | ||
[https:// | [https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176 https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176] | ||
== Menü beim Scrollen ausblenden == | == Menü beim Scrollen ausblenden == | ||
| Zeile 62: | Zeile 129: | ||
[https://angular.io/api/core/HostListener https://angular.io/api/core/HostListener] | [https://angular.io/api/core/HostListener https://angular.io/api/core/HostListener] | ||
== Routing == | |||
[[Sub-Routing (Angular)|Sub-Routing]] | |||
== Custom Modal Dialog == | |||
[https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box] | |||
== Styles == | |||
[https://angular.io/guide/component-styles https://angular.io/guide/component-styles] | |||
== Deployment == | |||
[[Deployment Angular]] | |||
== Links == | == Links == | ||
[https://www.w3schools.com/angular/default.asp https://www.w3schools.com/angular/default.asp] | [https://www.w3schools.com/angular/default.asp https://www.w3schools.com/angular/default.asp] | ||
== Probleme == | |||
[[Agular Probeme und Lösungen]] | |||
=== Visual Studio Code is unable to watch for file changes in this large workspace === | |||
Die Datei ''sysctl.conf'' bearbeiten | |||
<pre> | |||
sudo vi /etc/sysctl.conf | |||
</pre> | |||
und am Ende folgende Zeile hinzufügen: | |||
<pre> | |||
fs.inotify.max_user_watches=524288 | |||
</pre> | |||
Danach neuen Wert mit folgenden Befehl laden: | |||
<pre> | |||
sudo sysctl -p | |||
</pre> | |||
Neues Limit überprüfen: | |||
<pre> | |||
cat /proc/sys/fs/inotify/max_user_watches | |||
</pre> | |||
Zurück zu [[JavaScript#Tutorials|JavaScript]] | Zurück zu [[JavaScript#Tutorials|JavaScript]] | ||
Aktuelle Version vom 21. April 2020, 15:47 Uhr
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
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
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
Custom Modal Dialog
https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box
Styles
https://angular.io/guide/component-styles
Deployment
Links
https://www.w3schools.com/angular/default.asp
Probleme
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