STYLE SWITCHER

Angular JS

How To Fix Your Angular App When It’s Not Working in IE11

How To Fix Your Angular App When It’s Not Working in IE11

Using polyfills to support new features

While Internet Explorer 11 has been deprecated for a while now, Microsoft still provides security updates and technical support. However, IE11 does not support many new features which are already working in other browsers, like Google Chrome, or which will come out in the future. That’s why it’s necessary to use polyfills if you still want your application to work in IE11.

  • Add a new tsconfig-es5.app.json file.
  • Update angular.json configuration.
  • Run your application: ng serve --configuration es5. I recommend to add a run script in package.json for convenience.

polyfills.ts

Update the packages in polyfills.ts


/** IE10 and IE11 require the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';

/** IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

tsconfig-es5.app.json

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

Run your application with this ng serve --configuration es5

More
Angular js 2 Owl Carousel Responsive options

Angular js 2 Owl Carousel Responsive options

<div class="col-md-10 offset-md-1 col-xs-12">
          <owl-carousel [options]="{responsive:{
    '320':{
        items:1

    },
    '600':{
        items:3

    },
     '980':{
        items:4,
       nav:true,
      dots: true

    }

  }}" [items]="viewCustomObjectList" [carouselClasses]="['owl-theme', 'row', 'sliding']">

Owl carousel Angular version, Click here

More
Cube.js – Open Source Serverless Analytics Framework

Cube.js – Open Source Serverless Analytics Framework

Cube.js is an open source serverless analytics framework that is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

A complete open source analytics platform: frontend SDKs and API backed by a fully managed analytics infrastructure.

Website

More
Contentful: Content Infrastructure for Digital Teams

Contentful: Content Infrastructure for Digital Teams

Our content infrastructure enables teams to power content in any digital product: website, app, or device.

Developers

  • Manage, integrate, and deliver content via APIs
  • Use your preferred languages and frameworks
  • Iterate quickly from dev, test, and staging to production

Content Creators

  • Easily create, manage, and publish content in the web app
  • Customizable workflows for each content team
  • Instant access to all new web app features
Website
More
Get the Angular app in remote device on the network

Get the Angular app in remote device on the network

Run ng serve & get the Angular app in your system on any device in the local network with this command:

ng serve --port 5200 --open --host <your local IP>

Then in the browser of any phone/laptop connected to same network, run :5200

Thank you Joel for finding the useful info

More
Ng Bootstrap

Ng Bootstrap

Bootstrap 4 components, powered by Angular

Native

Angular - specific widgets built from ground and using Bootstrap 4 CSS. APIs that makes sense in the Angular ecosystem. No dependencies on 3rd party JavaScript.

Widgets

All the Bootstrap widgets (ex. carousel, modal, popovers, tooltips, tabs, ...) and several additional goodies ( datepicker, rating, timepicker, typeahead).

Quality

All code is tested (almost 100% test coverage) and all changes reviewed. We are not cutting corners.

Accessible

All the widgets are accessible. We use proper HTML elements and required aria attributes. Keyboard navigation and focus management works as expected.

Team

We've created angular-ui/bootstrap and have spent several years doing widget development. A number of team members are core Angular contributors.

Community

We give back to the community by contributing to projects we build upon (Angular, Bootstrap). We support people on Stack Overflow.

Website
More
Angular Material – Material Design for Angular

Angular Material – Material Design for Angular

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. For developers using AngularJS, Angular Material is the reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.
Website
More