Tag: color

ngClass Directive: Ionic 2

Today lets learn how to make use of ngClass angular directive in our Ionic 2 application.

Related Read:
ngIf, index, first, last: Ionic 2

ngClass Directive: Ionic 2


[youtube https://www.youtube.com/watch?v=r1ZRoXBcUfs]

YouTube Link: https://www.youtube.com/watch?v=r1ZRoXBcUfs [Watch the Video In Full Screen.]



Company Names: src/pages/home/home.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
items: any = [];
  constructor() {
    this.items = [
      'Microsoft',
      'Apple',
      'Oracle',
      'Google',
      'IBM',
      'Tesla',
      'Technotip'
    ];
  }
}

We have an array of company names which is being assigned to variable items.

ngClass angular directive ionic 2

Output
Microsoft
Apple
Oracle
Google
IBM
Tesla
Technotip

CSS Class: src/pages/home/home.scss

page-home {
    .bold{
        font-weight: bolder;
    }
    .normal{
        font-weight: normal;
    }
}

We define two CSS classes which we use to apply for alternate list items – using ngClass directive. Alternatively the list items appear in bold and in normal font weight.

ngClass Directive – using ternary operator: src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
< ion-list no-lines>
  < ion-item *ngFor="let item of items; let i = index;"
             [ngClass]="(i % 2 == 0) ? 'bold' : 'normal'">
    {{i+1}}. {{item}}
  < /ion-item>
< /ion-list>
< /ion-content>

Here we use ternary operator and whenever i % 2 is zero we apply bold class to that item, if not we apply normal class to that list item.

ngClass Directive: src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Company Names
    < /ion-title>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
< ion-list no-lines>
  < ion-item *ngFor="let item of items; let i = index;"
             [ngClass]="{'bold': (i % 2 == 0)}">
    {{i+1}}. {{item}}
  < /ion-item>
< /ion-list>
< /ion-content>

This is yet another way of doing the same thing which we did using ternary operator above. Here, if i % 2 is equal to zero, then bold class will be applied, if not it won’t be applied.

changing colors: src/pages/home/home.scss

page-home {
    .bold{
        font-weight: bolder;
        color: blue;
    }
    .normal{
        font-weight: normal;
        color: green;
    }
}

Alternatively the list items appear in bold and in normal font weight, along with blue and green colors respectively.

color Input Type: HTML5

color input type fields expect the user to pick the color from the color palette. Once the user selects the color its corresponding hexadecimal value is being stored in the input field.

form-input-type-color-type-html5

Demo

There are jQuery plugins to accomplish this task, but with HTML5 we need not use any plugins to accomplish this!

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< !DOCTYPE html>
<html>
<head>
<title>color Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body onload="fetch()">
 
<div>
<label for="color">Color pick: </label>
 <input name="color" type="color" id="get" onchange="fetch()"/><br />
<label for="hexa">Hex Code: </label>
 <input name="hexa" type="text" id="put"/><br />
</div>
 
</body>
</html>

Here we have 2 input fields of type color and text respectively. Once the user selects a color from the color palette, the corresponding hexadecimal value is shown in the text input type field.

JavaScript file
myScript.js

1
2
3
4
5

function fetch()
{
var get = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Once the fetch method is called: it fetches the value present in the (color)input field and assigns it to text input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – color: HTML5


[youtube https://www.youtube.com/watch?v=MiCOVDrVH44]

YouTube Link: https://www.youtube.com/watch?v=MiCOVDrVH44 [Watch the Video In Full Screen.]



Note: In real production server, you need not use two input fields as shown in this video tutorial. You can simply make use of the color input type and once you submit the form, you’ll get hexadecimal code value in place of the color input field. If you have a large audience still using Internet Explorer or other older browsers, then you can use jQuery plugin to accomplish the same task across all major browsers.

Colorful Text Output: C program

This video tutorial shows a simple method to get the output in different colors, on the dosprompt: using a simple C program.

Video Tutorial: Colorful Text Output: C program


[youtube https://www.youtube.com/watch?v=TpasN_6RMMM]

YouTube Link: https://www.youtube.com/watch?v=TpasN_6RMMM [Watch the Video In Full Screen.]



Full Source code: Colorful Text Output: C program C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#include< stdio.h> /* Leave No space b/w < and stdio.h */ 
void main()
{
int i;
clrscr();
 
for( i=0; i<=15; i++ )
{
textcolor(i);
cprintf("Microsoft, Google, Yahoo, Oracle, eBay, PayPal \r\n");
}
 
getch();
 
}

textcolor() function takes color code as it’s parameter, and this color is taken by cprintf() function and the parameter(string) passed to cprintf is printed in the color given by textcolor() function.

Color Name
———-		Color code
———-
BLACK
BLUE
GREEN
CYAN
RED
MAGENTA
BROWN
LIGHTGRAY
DARKGRAY
LIGHTBLUE
LIGHTGREEN
LIGHTCYAN
LIGHTRED
LIGHTMAGENTA
YELLOW
WHITE		0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

OutPut:
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal
Microsoft, Google, Yahoo, Oracle, eBay, PayPal