Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(33 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
== Icons ==
== Callbacks ==


<pre>
<pre>
npm install font-awesome --save
<some-modal-tag [callbackMethod]="parentComponentMethod()"><some-modal-tag/>
 
@Input: callbackMethod;
  onDismiss(){
  callbackMethod();
}
 
parentComponentMethod() {
return () => {
  // Your code here
}
}
</pre>
</pre>


<pre>
=== Links ===
"styles": [
 
  ...
[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]
  "node_modules/font-awesome/css/font-awesome.min.css",
 
  ...
[https://octoperf.com/blog/2016/04/03/angular2-typescript-callback-typing/ https://octoperf.com/blog/2016/04/03/angular2-typescript-callback-typing/]
],
 
</pre>
[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]


<pre>
== EventEmitter ==
... class="fa fa-user icon" ...
</pre>


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


[https://fontawesome.com/free https://fontawesome.com/free]
[https://angular.io/api/core/EventEmitter https://angular.io/api/core/EventEmitter]
 
== Icons ==
 
[[Icons FontAwesome (Angular)|Icons FontAwesome]]


== JQuery ==
== JQuery ==
Zeile 30: Zeile 75:
"scripts": [
"scripts": [
   ...
   ...
   "../node_modules/jquery/dist/jquery.min.js"  
   "./node_modules/jquery/dist/jquery.min.js"  
   ...
   ...
]
]
</pre>
<pre>
import * as $ from 'jquery';
</pre>
</pre>


Zeile 80: 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 ==
Zeile 87: Zeile 152:
== Probleme ==
== Probleme ==


=== 'Access-Control-Allow-Origin' header is present on the requested resource. ===
[[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:


Siehe [[Tomcat_installation_per_apt-get_(Linux)#No_.27Access-Control-Allow-Origin.27_header_is_present_on_the_requested_resource.|Tomcat installation per apt-get]]
<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“