The Info Grid

[theinfogrid-blog]

Using OS Environment Variables in Angular (with Docker)

Using OS Environment Variables in #Angular (with #Docker)

Angular has its way of handling different target environments, through angular environments files – which you can learn more about here. The issue with this approach is that it requires you to commit keys and configuration to your version control. This is not a big problem since it’s not advisable have any sensitive data in your angular source code.

However, I find it important to keep those keys…

View On WordPress

[theinfogrid-blog]

Golang – Building Small Docker Images

#Golang – Building Small #Docker Images using multistage builds

In this post, we are going to see how we can reduce the size of our final docker image size for our golang app. To achieve this, we are going to be using the scratch docker image. This is going to reduce the size of the final image by over 95%.

Why? By reducing the size of our final docker image, we are reducing the attack surface area. This means that attackers have less libraries, tools to…

View On WordPress

[theinfogrid-blog]

Creating a Filter Method for Angular Async Pipe

Creating a Filter Method for #Angular Async Pipe

In a previous post earlier this week, we looked at how we can handle errors when using Angular Async Pipe. In this post, we are going to build a simple filter method for Angular Async Pipe. We are going to use a custom pipe to filter results, then pass an observable back to the async pipe for subscription and rendering of the results.

We will be simulating a call to a backend, where you take a…

View On WordPress

[theinfogrid-blog]

Angular Async Pipe – How to Handle Errors

#Angular Async Pipe – How to Handle Errors

In this post, I am going to show you a very simple yet effective way of handling errors when using Async Pipe in Angular. If you are new to async pipe, it basically allows you to subscribe to observables and promises right inside your templates. Below is a simple example of how you can use Async Pipe in Angular.

<ng-container *ngIf="some_observable | async" ></ng-container>

Async Pipe has two…

View On WordPress

[theinfogrid-blog]

Entry Components in Angular - What are they?

Entry Components in Angular – What are they?

In this post, we are going to look at Entry Components in Angular, what they are and why they even exist. In the simplest terms possible, an entry component in Angular is any component that is loaded by its class, not selector.

@Component({   selector: 'app-some-component', //

View On WordPress

[theinfogrid-blog]

Building a Simple Responsive App with Angular Flex Layout

Building a Simple Responsive App with #Angular Flex Layout

In the last post, which you can find here, we introduced Angular Flex Layout. We looked at the APIs/Directives available to you as a developer and how you can use them. In this post, we are going to build on that foundation. Our goal here is very simple, building a simple responsive card list, that will respond to different viewports.

In this post, we are going to be using Angular 2 Materialfor…

View On WordPress

[theinfogrid-blog]

Angular Flex Layout – Introduction & Getting Started

#Angular Flex Layout – Introduction & Getting Started

In this post, I am going introduce and look at how you can get started with Angular Flex Layout. We will briefly introduce the APIs for Angular Flex Layout and look at how to add it to your project. Angular Flex Layout is a stand-alone library developed by the Angular Team for designing sophisticated layouts. If you have used Bootstrap before, this provides only the Layout (Grid) Component only.

View On WordPress

[theinfogrid-blog]

Building a Wrapper for Responsive Design in Angular Flex Layouts

Building a Wrapper for Responsive Design in #Angular Flex Layouts

Angular Flex Layout is designed to provide a comprehensive layout design using CSS Flexbox and Media Query. Unlike most other libraries, it doesn’t use CSS Classes but rather uses directives. It also makes it easy to manipulate DOM. On top of that, you can inject it into the component class, if you wanted to change code behavior based on the device width. You can learn more about Angular Flex…

View On WordPress

[theinfogrid-blog]

How to Build Custom Pipes in Angular

How to Build Custom Pipes in #Angular

In simple terms, pipes allow us to write display value transformation right inside the template. Angular comes with stock or built in pipes to transform your values to what you want the user to see. For instance, the Date Pipe, allows you to change the date format and other aspects related to the date.

To use a pipe inside the template, you use the pipe operator (|), the pipe on the right and the…

View On WordPress

[theinfogrid-blog]

Angular Reactive Forms - Dynamic Form Fields using FormArray

#Angular Reactive Forms - Dynamic Form Fields using FormArray

In most cases, forms have constant form controls  – remaining static throughout the lifetime of the form. But from time to time, you can find yourself in a situation where you would like to dynamically add or remove form controls. These form controls are added dynamically as result of user interaction. On top of that, you might also want to be able to validate data of the newly created forms.…

View On WordPress

[theinfogrid-blog]

How to Modify the UI Based on User Role in Angular

How to Modify the UI Based on User Role in #Angular

In today’s post, we are going to see how to modify the User Interface (UI) based their user role. This is useful if you wish to display different UI Elements/Components based on the user role. While this is not a security measure, it has the potential to greatly enhance the User Experience (UX).

To achieve this, we will be using NGXS – a state management library which was built as an easy to user…

View On WordPress

[theinfogrid-blog]

Deploying Angular 6 and Above Apps to GitHub Pages

Deploying Angular 6 and Above Apps to GitHub Pages

In this post, I am going to show you how to deploy angular apps to GitHub pages. You can think of GitHub pages as a free hosting platform that you can use to host client-based apps. You can host things like demos, portfolios, documentations etc.

You can use it to host any client-side app as long as you comply to GitHub terms and conditions. Learn more about limitations of GitHub Pages here. I am…

View On WordPress

[theinfogrid-blog]

Angular CLI v7 – CLI Prompts and Barebone Angular App

Angular CLI v7 – CLI Prompts and Barebone Angular App

Angular 7 was officially released this week, with lots of new features. Apart from being officially released, nothing else (feature wise) has changed since my last poston Angular 7. In this post, we will look at CLI Prompts and Generating a Minimal Project, some of the new features for Angular CLI 7. The first feature is, in my opinion, the most important feature for Angular CLI 7. The second one…

View On WordPress

[theinfogrid-blog]

Progressive Web Apps (PWAs) in Angular – Part 2

Progressive Web Apps (PWAs) in Angular – Part 2

Google Chrome version 70 was released earlier this week. Among other features, it added support Progressive Web Apps (PWAs) on desktops. This give me an idea for this post where we are going to dive a little bit deeper into PWAs. If you are new to PWAs, please check my introduction to PWAs here. We will focus on two things:

How to check for new versions of your PWAs and

Prompting users to install…

View On WordPress

[theinfogrid-blog]

APP_INITIALIZER – Tapping into Initialization Process in Angular

How to tap into app Initialization Process in #Angular

In this post, we are going to look at how we can use APP_INITIALIZER in Angular. So, what exactly does APP_INITIALIZER do? The best way to answer that is by looking at my previous post, which can be found here. It was about angular environment variables being loaded remotely, instead of environment files which are built into the app.

So, in this scenario, you might need to have access to those…

View On WordPress

[theinfogrid-blog]

A Better Approach to Environment Variables in Angular

A Better Approach to Environment Variables in #Angular

Angular provides a default way to configure environment variables, which you can learn more about here. But in a nutshell, you have different environment files, where you store environment variables and during the build process, angular compiler will use the correct environment file to replace and the default environment variables.

So, if you are targeting production environment, angular will…

View On WordPress

[theinfogrid-blog]

Creating Reusable Components in Angular

Creating Reusable Components in #Angular

In this post, we are going to look at tips you can use to make your components more reusable. Reusing components allows developers to avoid code duplication, which can introduce errors and bugs and are also hard to troubleshoot.

Take for instance a shopping site, the product display component, whether the product is electronic or beverage, can be displayed using the same component. So, it would…

View On WordPress