SimpleJS lightweight javascript library

SimpleJS is a lightweight javascript library to get you started on plane javascript project that doesn’t need libraries to start with.
Some of the major functionality includes the following.

  • Manipulate Cookies.
  • Make GET, POST calls with JSON data.
  • Load attributes to an element by passing an object.
  • Insert element before an element in DOM.
  • Get Parent element in DOM.

Using bootstrap 4 modal with Angular 5

Make sure you have jquery and bootstrap installed.
or else you can use the following commands.

If you are using angular-cli, then you need to include the jquery in the scripts section of .angular-cli.json file. The same goes with bootstrap files as well. My file looks somewhat similar to the following.

Here is the HTML you would want to use to trigger the modal to show up. The fade class is removed from the modal with id = “exampleModal” when the button with the attributes data-toggle = “modal” data-target = “#exampleModal” is clicked.

HTML

Programmatically

If you want trigger the opening and closing of the modal programmatically, then use the following in your methods inside the component with the above HTML after installing the required.

This is the best approach if all that we want to use is the modal. We can avoid the overhead of an angular wrapper around bootstrap jQuery functions.
Now in the component in which you are using jQuery import it as the following.

Using multiple guards for a route in Angular

The canActivate() method which should be overridden, should return only one of the following types

  • Observable<boolean>
  • Promise<boolean>
  • boolean

The multiple routes work like an ‘&&’ condition in javascript, i.e., angular won’t execute the later guards, if the first one fails.

app-routing.module

guard-one.guard

guard-two.guard

The login service that is being used above can be somewhat like this:

guard-two.guard

For these files to work, you need to add them to the app.module.ts and also use in the main component where you would like to use the router.

HTTP call in Angular 5

The approach that will be discussed in this post uses the recommended HttpClient from angular 4.

login.service.ts

The above login service returns an observable of type any. We can also validate the object being returned by expecting a certain class.
Now the service needs to be injected into the component that we are going to use.

login.component.ts

The login and return classes may look somewhat like this,

login-obj.ts

return-obj.ts

Now we finally need to add the service and component into the app.module.ts.

The service goes into the providers section, and the component goes into the declarations.

app.module.ts