Month: March 2019

Customize Glide Network Timeouts on Android

build.gradle

implementation 'com.squareup.okhttp3:okhttp:3.12.0'
implementation "com.github.bumptech.glide:okhttp3-integration:4.9.0"
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

create a new GlideModule

@GlideModule
public class CustomTimeOutOkHttpGlideModule extends LibraryGlideModule {

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        OkHttpClient.Builder builder = new OkHttpClient.Builder();

        // customize connection timeouts here
        // ...

        OkHttpClient okHttpClient = builder.build();

        registry.replace(GlideUrl.class, InputStream.class,
                new OkHttpUrlLoader.Factory(okHttpClient));
    }

}

References
https://futurestud.io/tutorials/glide-4-customize-network-timeouts
https://futurestud.io/tutorials/glide-module-example-accepting-self-signed-https-certificates
https://bumptech.github.io/glide/int/okhttp3.html

Using Services for Cross-Component Communication in Angular

event-bus.service.ts

import {EventEmitter, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EventBusService {

  statusUpdate = new EventEmitter<string>();

  constructor() {
  }

}

input.component.html

<label>
  Name
  <input type="text" (change)="onInputChanged($event)">
</label>

input.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {EventBusService} from '../services/event-bus.service';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {

  inputText: string;

  constructor(private eventBus: EventBusService) {
  }

  ngOnInit() {
  }

  onInputChanged(event: Event) {

    this.inputText = (event.target as HTMLInputElement).value;
    this.eventBus.statusUpdate.emit(this.inputText);
  }

}

output.component.html

<p>
  {{output}}
</p>

output.component.ts

import {Component, OnInit} from '@angular/core';
import {EventBusService} from '../services/event-bus.service';

@Component({
  selector: 'app-output',
  templateUrl: './output.component.html',
  styleUrls: ['./output.component.css']
})
export class OutputComponent implements OnInit {

  output: string;

  constructor(private eventBus: EventBusService) {
  }

  ngOnInit() {
    this.eventBus.statusUpdate.subscribe((status: any) => {
      this.output = status;
    });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { InputComponent } from './input/input.component';
import { OutputComponent } from './output/output.component';
import {EventBusService} from './services/event-bus.service';

@NgModule({
  declarations: [
    AppComponent,
    InputComponent,
    OutputComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [EventBusService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-input></app-input>
<app-output></app-output>

References
https://github.com/mhdr/AngularSamples/tree/master/020/my-app

Injecting Services into Services in Angular

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {Logging2Service} from './logging2.service';
import {DataService} from './data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Logging2Service, DataService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

logging2.service.ts

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Logging2Service {

  constructor() {
  }

  logStatus(status: string) {
    console.log('Status : ' + status);
  }
}

data.service.ts

import {Injectable} from '@angular/core';
import {Logging2Service} from './logging2.service';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private loggingService: Logging2Service) {
  }

  addNewData(name: string, age: number) {
    // insert data to db
    // db.insert(name,number);

    this.loggingService.logStatus('New');
  }
}

References
https://github.com/mhdr/AngularSamples/tree/master/019/my-app

Creating a Logging Service in Angular

logging2.service.ts

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Logging2Service {

  constructor() {
  }

  logStatus(status: string) {
    console.log('Status : ' + status);
  }
}

app.component.ts

import {Component} from '@angular/core';
import {Logging2Service} from './logging2.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [Logging2Service]
})
export class AppComponent {

  constructor(private loggingService: Logging2Service) {
  }

  onButtonClick() {
    this.loggingService.logStatus('New');
  }
}

app.component.html

<input type="button" (click)="onButtonClick()" value="Log"/>

Above we injected the service to component level so we can have different instances of service for different components, but we can have the service on app level by initializing it in app.module.ts (we should remove it from component providers). On this case, all instances of service in the application share the same data.

app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {Logging2Service} from './logging2.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Logging2Service],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Reference
https://github.com/mhdr/AngularSamples/tree/master/019/my-app
https://angular.io/guide/hierarchical-dependency-injection
https://itnext.io/understanding-provider-scope-in-angular-4c2589de5bc

Understanding ngSwitch in Angular

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  number = 10;
}

app.component.html

<div [ngSwitch]="number">
  <p *ngSwitchCase="1">1</p>
  <p *ngSwitchCase="2">2</p>
  <p *ngSwitchCase="10">10</p>
  <p *ngSwitchDefault>Default</p>
</div>

References
https://github.com/mhdr/AngularSamples/tree/master/018/my-app

Building a Structural Directive in Angular

unless.directive.ts

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.vcRef.createEmbeddedView(this.templateRef);
    } else {
      this.vcRef.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {
  }

}

app.component.html

<P *appUnless="true">True</P>
<P *appUnless="false">False</P>

References
https://github.com/mhdr/AngularSamples/tree/master/017/my-app

Binding to Directive Properties in Angular

binding2.directive.ts

import {Directive, HostBinding, HostListener, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[appBinding2]'
})
export class Binding2Directive implements OnInit {

  @Input() defaultColor = 'transparent';
  @Input() highlightColor = 'yellow';

  @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

  constructor() {
  }

  @HostListener('mouseenter') mouseover(eventData: Event) {
    this.backgroundColor = this.highlightColor;
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.backgroundColor = this.defaultColor;
  }

  ngOnInit(): void {
    this.backgroundColor = this.defaultColor;
  }
}

app.component.html

<p appBinding2 [defaultColor]="'purple'" [highlightColor]="'orange'">Hello World 5</p>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app

Using HostBinding to Bind to Host Properties when Creating Directive in Angular

host-binding.directive.ts

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector: '[appHostBinding]'
})
export class HostBindingDirective {

  @HostBinding('style.backgroundColor') backgroundColor = 'transparent';

  constructor() {
  }

  @HostListener('mouseenter') mouseover(eventData: Event) {
    this.backgroundColor = 'green';
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.backgroundColor = 'transparent';
  }
}

app.component.html

<p appHostBinding>Hello World 4</p>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app

Using HostListener to Listen to Host Events when Creating Directive in Angular

host-listener.directive.ts

import {Directive, ElementRef, HostListener, OnInit, Renderer2} from '@angular/core';

@Directive({
  selector: '[appHostListener]'
})
export class HostListenerDirective implements OnInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit(): void {
  }

  @HostListener('mouseenter') mouseover(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'green');
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
  }

}

app.component.html

<p appHostListener>Hello World 3</p>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app