Angular

Icons

npm install font-awesome --save

"styles": [
  ...
  "node_modules/font-awesome/css/font-awesome.min.css",
  ...
],

... class="fa fa-user icon" ...

Links

https://fontawesome.com/free

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

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

Zurück zu JavaScript