mazipan

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'HeaderBlock',
  templateUrl: './header.component.html' 
})
export class HeaderComponent {
    headerTitle: string;
    userName: string;
    constructor() {

mazipan

<header role="header" class="site__header header" id="header">
    <div class="header__wrapper">
        <div class="header__brand">
            <img src="https://mazipan.github.io/lightweight-admin-template/images/irfan-maulana.jpg" />
            <div class="header__title" [innerText]="headerTitle">
            </div>
        </div>
        <div class="header__account account account--has-login">
            <div class="account__wrapper">
                <img class="account__img" src="https://mazipan.github.io/lightweight-admin-template/images/irfan-maulana.jpg" />

mazipan

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'HeaderBlock',
  template: `
        <header role="header" class="site__header header" id="header">
          <div class="header__wrapper">
        
            <div class="header__brand">
              <img src="https://mazipan.github.io/lightweight-admin-template/images/irfan-maulana.jpg" />

mazipan

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HeaderComponent } from './Header/header.component';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent

mazipan

<link rel="stylesheet" type="text/css" href="https://mazipan.github.io/bem-kit/dist/bem-kit.min.css">
<link rel="stylesheet" type="text/css" href="https://mazipan.github.io/lightweight-admin-template/dist/lightweight-admin-template.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

mazipan

// Sample AngularJS v.1.x controller
// Inject service

var irfanCtrl = angular.module('irfan.basic.controller',[]);
irfanCtrl.controller('irfan.ctrl', ['$scope', 'irfanShareObject', irfanCtrlFunc]);
function irfanCtrlFunc($scope, irfanShareObject){
  // do nothing
}

mazipan

// AngularJS v.1.x Service
// Sample create service
var irfanServices = angular.module('irfan.basic.service', []);
irfanServices.factory('irfanShareObject', [irfanServicesFunction]);
function irfanServicesFunction() {
    var fullName= "";
    return {
        setFullName: function(firtname, lastname) {
            if(typeof firtname !== 'undefined' && firtname !== '') {	           
               fullName = firtname;

mazipan

export class Film {
  constructor(
    public title: string,
    public episode_id: number,
    public opening_crawl: string,
    public director: string,
    public producer: string,
    public release_date: string,
  ) { }
}

mazipan

export class UrlCollection {
  public static readonly FILM = "https://swapi.co/api/films/"
  public static readonly PEOPLE = "https://swapi.co/api/people/"
  public static readonly PLANET = "https://swapi.co/api/planets/"
  public static readonly SPECIES = "https://swapi.co/api/species/"
  public static readonly STARSHIP = "https://swapi.co/api/starships/"
  public static readonly VEHICLE = "https://swapi.co/api/vehicles/"
}

mazipan

import { Film }  from '../Film/Film'

export class ObjectConverter {
  public convertResponseToFilm(r:any): Film{
    let film = ({
      title: r.title,
      episode_id: r.episode_id,
      opening_crawl: r.opening_crawl,
      director: r.director,
      producer: r.producer,