Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 64: Zeile 64:
== Icons ==
== Icons ==


<pre>
[[Icons FontAwesome (Angular)|Icons FontAwesome]]
npm install font-awesome --save
</pre>
 
<pre>
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/angular-fontawesome
</pre>
 
<pre>
"styles": [
  ...
  "node_modules/font-awesome/css/font-awesome.min.css",
  ...
],
</pre>
 
<pre>
... class="fa fa-user icon" ...
</pre>
 
=== Links ===
 
[https://github.com/FortAwesome/angular-fontawesome#usage https://github.com/FortAwesome/angular-fontawesome#usage]
 
[https://fontawesome.com/free https://fontawesome.com/free]
 
=== Links Installation ===
 
[https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons]


== JQuery ==
== JQuery ==
Zeile 163: Zeile 133:


[[Sub-Routing (Angular)|Sub-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 170: Zeile 152:
== Probleme ==
== Probleme ==


=== 'Access-Control-Allow-Origin' header is present on the requested resource. ===
[[Agular Probeme und Lösungen]]
 
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]] bzw. [[Spring_Security#CORS (Cross Over Resource Sharing)|Spring Security (CORS)]]


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

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