Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(40 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 font-awesome --save
npm install jquery --save
</pre>
</pre>


<pre>
<pre>
"styles": [
"scripts": [
   ...
   ...
   "node_modules/font-awesome/css/font-awesome.min.css",
   "./node_modules/jquery/dist/jquery.min.js"  
   ...
   ...
],
]
</pre>
</pre>


<pre>
<pre>
... class="fa fa-user icon" ...
import * as $ from 'jquery';
</pre>
</pre>


=== Links ===
=== Links ===


[https://fontawesome.com/free https://fontawesome.com/free]
[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 28: Zeile 95:


<pre>
<pre>
  prevScrollpos = 0;
  ...
   @HostListener('window:scroll', ['$event'])
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event) {
   scrollHandler(event) {
Zeile 35: Zeile 106:
       document.getElementById('nav-bar').style.top = '0';
       document.getElementById('nav-bar').style.top = '0';
     } else {
     } else {
       document.getElementById('nav-bar').style.top = '-100px';
       document.getElementById('nav-bar').style.top = '-50px';
     }
     }


     this.prevScrollpos = currentScrollPos;
     this.prevScrollpos = currentScrollPos;
   }
   }
</pre>
<pre>
#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  transition: top 0.5s;
}
</pre>
</pre>


Zeile 45: Zeile 127:


[https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp]
[https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp]
[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, 14: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

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

Icons FontAwesome

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

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

Deployment Angular

Links

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 

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

Abgerufen von „https://tutorials.kirner.or.at/tutorials/index.php?title=Angular&oldid=7665“