As indicated in this article, it is common to share data between a parent component, and one or more child components. One can implement this pattern by using @Input() and @Output() directives.

However, the explanation for this pattern is NOT very clear. Here in this series of articles, I would like to explain the implementation of this pattern in detail. First, I’ll explain @Input().

For demonstration, first create a blank Angular project. Delete all content in app.component.html.

Sending data to child components

Use the app-root as the parent component. In app.component.ts, write the following code:

import { Component } from '@angular/core';@Component({
selector: 'app-root'…

Use the following steps to create the environment. For more information, please the article below the steps. :). (By the way, I use Ubuntu 20.04)

  1. Create a directory data in any directory you want.
  2. Create a Docker network using the following command.
docker network create learning-postgreSQL-network 

3. Create a container running a PostgreSQL server. The container will populate the directory data with necessary data.

docker run --rm --name postgres-server -v $(pwd)/data:/var/lib/postgresql/data --network learning-postgreSQL-network -e POSTGRES_PASSWORD=your-password postgres

4. You can connect to the above PostgreSQL server by the following command.

docker run --rm -it --network learning-postgreSQL-network postgres psql -U postgres -h…

You may be like me, who just want to learn Sass only. However, you find that it is not that easy to setup a system that can automatically transpile Sass files and automatically reload the browser when Sass, javascript or HTML files changes. At first, I thought I can only do this with a whole gulp.js. Fortunately, there is no need to use gulp.js. Of course, this still took me hours to solve this problem. Here is the simple solution to this situation.

First, as usual, I would like to list all the requirements.

  • Don’t have to install extra software…

Now it is time for me to begin to seriously learn a database. I know the theory of databases, but I lack of experience using a database. I used MS SQL before, but I know little about it. I switch to open-source (ah, the dark side :) ) now, so I choose MariaDB as a starting point.

I grabbed a Learning MySQL and MariaDB, and decide to read from the first page to the last page. Try to familiarize myself with MariaDB by completing all the exercises.

The first task is to install MariaDB. As usual, I don’t want to…

The official document of Semantic-UI says little about learning how to use Semantic-UI. Examples are given, but they are code only. None of them are described in detail.

I usually learn programming language by examples. Not only read the example code, but also write the example code from scratch. This way I can understand every single line of the code. I would like to use the same way to learn Semantic-UI.

The first example I want to learn is Cover template. You can find the source code here. …

You may not want to install Nodejs just for CSS development with semantic-UI. This simple Docker image is all you need.

Features of this image are:

1. no need to install Nodejs locally

2. install semantic-UI locally

The Dockerfile to create the image is:

FROM node:lts-alpine
RUN apk update && apk upgrade
RUN npm install -g gulp
RUN mkdir /app

Build the image with a appropriate tag. The tag used here is semantic-ui.

The command to run the container is:

docker run -it --rm \
-v $(pwd):/app \
--user $(id -u):$(id -g) \
semantic-ui /bin/sh

This shell script…

Here I would like to create a responsive menu. The menu is vertically stacked on small screens, and is a horizontal navigation bar on larger screens.

When I tried to combine the two menus in the same file to achieve responsiveness, I found things got tangled. It is better to write a horizontal navigation menu and a vertically stacked menu separately. Then combine the two menus latter.

I recall when I was learning design patterns. Two principles I learned. The first one is “divide and conquer”. Divide the responsive menu into two menus. One is horizontal and the other is…

For HTML code please see this article. The CSS code is

* {
box-sizing: border-box;
body {
margin: 0;
padding: 0;
background-color: #ccc;
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
text-align: center; /* step 4*/
overflow: auto; /* step 5*/
nav li {
float: left; /* step 1 */
width: 20%; /* step 3*/
nav a {
display: block; /* step 2 */
/* common text style */
nav a {
font-family: sans-serif;
font-size: 1.2rem; …

The effect of every line of code can be observed using a simple Browser-Sync docker image.

The HTML code for the horizontal navigation bar is as follows.

<li><a href="#">Home</a></li>
<li><a class="active" href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>

A horizontal navigation bar can be done in two different ways. One uses inline-block and the other uses float. In this article only the inline-block method is provided.

The code for a horizontal navigation menu, which use inline, is as follows. Critical steps are marked and explained.

* {
box-sizing: border-box;
body {…

There is a great article that explains how to build a simple CSS menu in detail. However, I want to build my own and record each step in my own tongue.

First of the first is to clarify requirements. Requirements are simple.

  1. The menu is a vertical menu on small screens.
  2. The menu is a horizontal navigation bar on large screens.

I would like to keep the code as simple as possible. HTML code for the menu is as follows. It is just a plain unordered list.


Chun Ming Wang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store