DEV Community: Dimakatso

Angular NgIf directive implementation

Dimakatso — Mon, 20 Jul 2020 14:45:49 +0000

In this article, we will learn how to implememt NgIF structural directive using angular 9.

NgIf directive overview

NgIf — change the DOM layout by adding and removing DOM elements based on a conditional statement. Placing the ngIf directive on a component, or element, will in fact hide or show that element based on the truthy or falsy of the condition you pass it.

NgIf usage example

Using NgIf directive is very simple, all you need to do is add it to any html element that you want to show/hide.



<div *ngIf="isLoading">
  Loading...
</div>

The div above will be added to the DOM only if isLoading is true.

Implementation

Now that we understand NgIf and how to use it, lets start with our own implementation. We'll call it MyNgIf.

Create project using angular CLI

Open terminal and run ng new ngif-directive, this creates new angular project called ngif-directive.

Directive using angular CLI

cd into the project and run ng g d myNgIf to generate directive template file. Open my-ng-if.directive.ts and paste the following code:



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

@Directive({
  selector: '[appMyNgIf]'
})
export class MyNgIfDirective {

  @Input() set appMyNgIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

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

}

The @Directive decorator is used to configure this class as an directive. The brackets ([]) on selector: '[appMyNgIf]' make this directive an attribute selector. Angular will locates each element in the template that has an attribute 'appMyNgIf' and applies the logic of this directive.

The @Input decorator is used to pass data to the directive from the element our directive is attached to.

TemplateRef represent the element our directive is attached.

ViewContainerRef is a container where one or more template can be attached by calling createEmbeddedView method. To remove attached template(s) we call clear method.

Use `appMyNgIf` directive

Paste the following code into app.component.ts



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

@Component({
  selector: 'app-root',
  template: `
    <div *appMyNgIf=condition>
      Loading...
    </div>
    <button (click)="condition = !condition">Show/Hide</button>
  `,
})
export class AppComponent {
  condition = true;
}

If you run the app (npm start) and go to http://localhost:4200, the div with loading... should be rendered.

If you click Show/Hide button, the div should be hidden.

Code available on github

Springboot + JPA + Kotlin

Dimakatso — Sat, 23 May 2020 08:26:40 +0000

Today you’ll learn how to develop REST API with Spring Boot 2 and Kotlin. Kotlin is 100% interoperable with Java. Which means you can call Java code from Kotlin and Kotlin code can be used from Java seamlessly. If you want to learn more about Kotlin, refer to Kotlin reference doc.

In this tutorial we'll use an in-memory database (H2) with Spring Data to persist and retrieve data via rest API.

Creating a New Project

Visit Spring Initializr and select Kotlin language. In this tutorial we'll use Maven, select Maven project. But you can also use Gradle.

Add the following dependencies:

Spring Data JPA
Spring Web
H2 Database
Spring Boot DevTools

Click Generate to downlaod .zip file and upack it into your working directory.

Understanding Application entry point

src/main/com/example/demo/DemoApplication.kt

package com.example.demo

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication

@SpringBootApplication
class DemoApplication

fun main(args: Array<String>) {
    runApplication<DemoApplication>(*args)
}

Main fun is the entry point for Springboot application. runApplication<DemoApplication>(*args) is Kotlin idiomatic alternative to SpringApplication.run(DemoApplication::class.java, *args) that you see mostly in Java.

Create Project structure

Create the following packages in src/main/com/example/demo directory:

config
controller
domain
repository
service

Create Entity Class

Create Product.kt in domain package.

package com.example.demo.domain

import javax.persistence.Column
import javax.persistence.Entity
import javax.persistence.Id
import javax.persistence.Table

@Entity
@Table(name = "product")
class Product(
        @Id
        @GeneratedValue(strategy = GenerationType.AUTO
        var id: Long,
        @Column
        var name: String,
        @Column
        var price: Float) {

    override fun toString(): String {
        return "Product(name='$name', price=$price)"
    }
}

Compared to Java, you can notice that we defined primary constructor as part of the class header. Kotlin will generate getter, setter, hashcode, and equals methods for us, which you can also override.

Create Repository Interface

Create ProductRepository.kt in domain package.

package com.example.demo.repository

import com.example.demo.domain.Product
import org.springframework.data.repository.CrudRepository
import org.springframework.stereotype.Repository

@Repository
interface ProductRepository: CrudRepository<Product, Long> {
    fun findProductsByName(name: String): List<Product>
}

Compared to Java, you can notice the use of : to implement CrudRepository

Service Interface and Implementation

Create ProductService.kt and ProductServiceImpl.kt in service package.

package com.example.demo.service

import com.example.demo.domain.Product

interface ProductService {
    fun createProduct(product: Product)
    fun findProductsByName(name: String): List<Product>
}

package com.example.demo.service

import com.example.demo.domain.Product
import com.example.demo.repository.ProductRepository
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.stereotype.Service

@Service
class ProductServiceImpl(@Autowired val productRepository: ProductRepository): ProductService {
    override fun createProduct(product: Product) {
        productRepository.save(product)
    }

    override fun findProductsByName(name: String): List<Product> {
        return productRepository.findProductsByName(name)
    }
}

Notice how we used constructor injection as part of class header to inject ProductRepository.

Controller Class

Create ProductController.kt in controller package

package com.example.demo.controller

import com.example.demo.domain.Product
import com.example.demo.service.ProductService
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("api/v1/products")
class ProductController(@Autowired val productService: ProductService) {

    @PostMapping
    fun createProduct(@RequestBody product: Product) {
        productService.createProduct(product)
    }

    @GetMapping("{name}")
    fun getProductsByName(@PathVariable("name") name: String): List<Product> {
        return productService.findProductsByName(name)
    }
}

Config Swagger UI

To configure Swagger UI add the following dependencies to pom.xml:

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

Create SwaggerConfig.kt in config package.

package com.example.demo.config

import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import springfox.documentation.builders.PathSelectors
import springfox.documentation.builders.RequestHandlerSelectors
import springfox.documentation.spi.DocumentationType
import springfox.documentation.spring.web.plugins.Docket
import springfox.documentation.swagger2.annotations.EnableSwagger2

@EnableSwagger2
@Configuration
class SwaggerConfig {
    @Bean
    fun api(): Docket = Docket(DocumentationType.SWAGGER_2)
            .select()
            .apis(RequestHandlerSelectors.any())
            .paths(PathSelectors.any())
            .build()
}

@EnableSwagger2 annotation will enable Swagger UI for this applicaton.

Now if you run the application and visit http://localhost:8080/swagger-ui.html, you will be able to persist/retrieve product using swagger-ui.

Code available on github.

Thank you for reading. Please leave a comment or questing.

Create Angular Library

Dimakatso — Wed, 20 May 2020 15:35:35 +0000

Today we're going to create a new reusable library. If you find youself creating the same component in more than one app (or you want to share your component with other developers), you have a need for a library.

Create the project

We'll use angular cli to generate library skeleton. If you don't have angular cli installed, refer to angular cli installation guide.

The following commands will generate angular project my-project and library my-lib

ng new my-project
cd my-project
ng generate library my-lib

This creates projects/my-lib in my-project folder, which contains
my-lib.component.ts and my-lib.service.ts. Angular cli also created public-api.ts file in my-lib folder. This file contains the following lines of code,

export * from './lib/my-lib.service';
export * from './lib/my-lib.component';
export * from './lib/my-lib.module';

This file defines what is available to the users of the library (A.K.A public API).

If you open my-lib.component.ts, you'll see the following code:

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

@Component({
  selector: 'lib-my-lib',
  template: `<p>my-lib works!</p>`,
  styles: []
})
export class MyLibComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}
}

This simple library output my-lib works! and we'll use selector,
<lib-my-lib></lib-my-lib> to consume the component.

Install the library as npm dependency.

To use any library in angular, you need to install it from package manager such as npm. In this example we'll not publish our library to npm package manager. If you want to learn about how to publish angular library, refer to angular guide.

Now we'll install my-lib as npm dependency from file. Open package.json and add "my-lib": "file:projects/my-lib" in dependencies block, See the code snippet below.

  "dependencies": {
    ...
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2",
    "my-lib": "file:projects/my-lib"
  }

my-lib is the package name you will see in node_modules folder and file:projects/my-lib is the actual library. If we'd published our library to npm, we'd replace file:projects/my-lib with version number(0.0.1).

If you run npm install, you'll notice my-lib added into node_modules folder. Now we can import and use the library in our project. see code snippet below:

import {MyLibModule} from 'my-lib';

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

Now that we imported the library module into our project, we can use MyLibComponent. Open app.component.html and replace all the code with
<lib-my-lib></lib-my-lib>.

Run the app

Run npm start or ng serve to start the app. Open the browser and vist http://localhost:4200, you'll see my-lib works! displayed.

Congratulations you've successfully created angular library!!