{
  "block": 106150526,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "7109.774581 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-18T06:10:39",
  "trx_id": "8d2b75406458ae7721cb7b6409749243763e33aa",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 106004562,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "4397.564176 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-13T03:56:21",
  "trx_id": "e623e055201078d5e84fe21fb662966d0cf1c50e",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 105518013,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "7122.290337 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-04-26T05:22:33",
  "trx_id": "fff02b1571a39cb544d597f8775eb4d25df40006",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 102870934,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "4439.110995 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-01-23T23:45:54",
  "trx_id": "fdc9d102701a866dea7ac795f4cb7fb31ff5443f",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 91317141,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "4603.330192 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2024-12-17T18:55:36",
  "trx_id": "a28012f7671e8ef1a75add758050f9b53655c204",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 79871302,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "4772.463724 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-11-14T10:37:12",
  "trx_id": "12cf0c85730393c3f8b59cb9a131a14239460a62",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 78362722,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "7709.372510 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-09-22T10:16:21",
  "trx_id": "5dfdc5370d4bfbe5c1067ad928b606b638104610",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 69120473,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "7931.423948 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-11-03T17:44:30",
  "trx_id": "ec546f4db3b2b2b3cb31ada12dde71c261af9245",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 66880910,
  "op": [
    "transfer",
    {
      "amount": "0.001 STEEM",
      "from": "ph-support",
      "memo": "",
      "to": "sarayulis"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-08-17T11:47:51",
  "trx_id": "3a1b8f54175502bd730159fb74c409e4641a0891",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 60823729,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8151.531549 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-01-17T22:56:48",
  "trx_id": "22bbc5299cb13dd003f5ca9babe3547aadaeb7a4",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 54614062,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8335.725837 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2021-06-14T06:08:06",
  "trx_id": "abc3f1dde04e2fda9695374c6b3e4e077db3fdba",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 49361329,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8523.147811 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-11T16:20:27",
  "trx_id": "e2d92672e58281b68b9a9796bd0358442237b7d9",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 49212854,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "1912.543513 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-06T09:56:12",
  "trx_id": "75fbe9b30b6b937e8fcb9a30175938d287b66e01",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 49196413,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8529.355665 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-05T19:58:15",
  "trx_id": "dc93df1ac8774215d6dfd3c493baaccfaa725be7",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 48270548,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "1920.017158 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-11-03T02:27:51",
  "trx_id": "f1b1c7b29f9dfb315cccb0c03c4a3773d63a8413",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 43223178,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8732.161024 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-09T10:59:09",
  "trx_id": "7fee7458db490994214ea399085042512b2d4846",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 43200203,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "1953.311140 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-08T15:22:27",
  "trx_id": "f6fbea27db7f7fdc6aec363ea39049c6ae105e30",
  "trx_in_block": 23,
  "virtual_op": 0
}

{
  "block": 40069229,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @sarayulis! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@sarayulis/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@sarayulis) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=sarayulis)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "sarayulis",
      "parent_permlink": "hello-friends-join-to-weku-now",
      "permlink": "steemitboard-notify-sarayulis-20200119t161648000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-01-19T16:16:48",
  "trx_id": "fc0d2cac1e3c20d38160e1162f6df83a915c7cf8",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 39117265,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "8811.263244 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-12-17T13:29:24",
  "trx_id": "c06c4725e7efab6c0c478ced8a7eac797340c460",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 29598352,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @sarayulis! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@sarayulis/birthday1.png</td><td><p>Happy Birthday! - You are on the Steem blockchain for 1 year!<p></td></tr></table>\n\n<sub>_[Click here to view your Board](https://steemitboard.com/@sarayulis)_</sub>\n\n\n> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "sarayulis",
      "parent_permlink": "hello-friends-join-to-weku-now",
      "permlink": "steemitboard-notify-sarayulis-20190119t174441000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-01-19T17:44:42",
  "trx_id": "bce98083920a666a87ee2f83bbedb9de5224044d",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 29472339,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "9008.242550 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-01-15T08:36:39",
  "trx_id": "09982f9f525af3a5a900e66c8957d4b303935294",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 26853314,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "29243.582406 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-10-16T08:38:09",
  "trx_id": "9714d668dfc5d9bef28092b2f016ee51543e6ac8",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 26851472,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "hello-friends-join-to-weku-now",
      "voter": "hackerzizon",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-10-16T07:06:00",
  "trx_id": "00f58f13b149ce76747619ece6c2363cc42623e3",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 26851429,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "hello friend here I'll explain a bit about the platform weku , weku is a blockchain future where we will be paid the prize in writing or a post.\n\nweku is a new platform and will soon be in the release , this is a great job, this post I made for other friends so please join to weku.\n\nhere I do a huge campaign and hopefully friends soon join in here, greetings from me @sarayulis\n\nJoin now\nhttps://deals.weku.io/",
      "json_metadata": "{\"tags\":[\"weku\",\"campaign\"],\"users\":[\"sarayulis\"],\"links\":[\"https://deals.weku.io/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "weku",
      "permlink": "hello-friends-join-to-weku-now",
      "title": "Hello friends join to weku now"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-10-16T07:03:51",
  "trx_id": "297cbe429523f9942df9b693db84c463da87c987",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 25840774,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "sarayulis",
      "delegator": "steem",
      "vesting_shares": "9077.749198 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-09-10T15:10:42",
  "trx_id": "bef064c74219dce2cca5815cb939b9ca5494904a",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 23410864,
  "op": [
    "author_reward",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "sbd_payout": "0.008 SBD",
      "steem_payout": "0.005 STEEM",
      "vesting_payout": "20.314557 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-17T20:45:39",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 12
}

{
  "block": 23404462,
  "op": [
    "author_reward",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "sbd_payout": "0.018 SBD",
      "steem_payout": "0.009 STEEM",
      "vesting_payout": "42.661070 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-17T15:25:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 11
}

{
  "block": 23404462,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "sarayulis",
      "benefactor": "esteemapp",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "8.125918 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-17T15:25:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 10
}

{
  "block": 23239591,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "touhidalam69",
      "weight": 5000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T21:56:33",
  "trx_id": "3038da34fcae6cb5b8fc44c5346d031d0d60bc7e",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 23238065,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "esmerallda",
      "weight": -10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T20:36:21",
  "trx_id": "7c9625ee4e8e3d35ba8ba66d49217e1866a2b526",
  "trx_in_block": 104,
  "virtual_op": 0
}

{
  "block": 23231128,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "Fuck",
      "json_metadata": "{\"tags\":[\"utopian-io\",\"tutorials\"],\"app\":\"esteem/1.6.0\",\"format\":\"markdown+html\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Deleted"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T14:44:00",
  "trx_id": "c8585c2386c0631318b9c4232fc85691c0a1ee55",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 23231048,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "#### Repository\nhttps://github.com/angular/angular\n\n\n#### What Will I Learn?\n**I Will learn :**\n• Creating the markup and styles for the Signup component.\n• Building the auth service.\n• Building the signup method.\n\n\n#### Requirement.\n• Typescript version 2.4.2\n• Node version version 8.9.4\n• Npm version 5.6.0\n• [Bootstrap 4.0](https://getbootstrap.com/)\n• Visual Studio Code IDE\n\n\n#### Difficulty\n* Advanced\n\n#### Creating the markup and styles for the Signup component.\n\nIn this project we are using bootstrap 4, you are expected to have some knowledge of bootstrap 4, teaching bootstrap 4 is beyond the scope of this tutorial. Below is the markup for the`signup.component.html`\n\n```<div class=\"signup__container\">\n  <div class=\"container\">\n      <form class=\"form-signin\"  #signupForm=\"ngForm\">\n        <div class=\"text-left mb-4\">\n          <h1 class=\"h3 mb-3 font-weight-normal\">Create an Account</h1>\n          <p> Create a free Voltron account to order any kind of food. Already have a Voltron account? <a  class=\"link\" routerLink=\"/login\">Log in here</a></p>\n        </div>\n        \n    \n        <div class=\"form-label-group\">\n          <input type=\"name\" id=\"inputName\" class=\"form-control\"placeholder=\"Full Name\" required autofocus>\n          <label for=\"inputName\">Name</label>\n        </div>\n\n        <div class=\"form-label-group\">\n            <input type=\"username\" id=\"inputUsername\" class=\"form-control\"  placeholder=\"Username\" required autofocus>\n            <label for=\"inputUsername\">Username</label>\n        </div>\n\n        <div class=\"form-label-group\">\n            <input type=\"email\" id=\"inputEmail\" class=\"form-control\" placeholder=\"Email address\" required autofocus>\n            <label for=\"inputEmail\">Email address</label>\n        </div>\n    \n        <div class=\"form-label-group\">\n          <input type=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Password\"  required>\n          <label for=\"inputPassword\">Password</label>\n        </div>\n    \n        <div class=\"checkbox mb-3\">\n          <label>\n            <input type=\"checkbox\" value=\"remember-me\"> Remember me\n          </label>\n        </div>\n        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Create Account</button>\n        <p class=\"mt-5 mb-3 text-muted text-center\">&copy; 2017-2018</p>\n      </form>\n  </div>\n</div>\n\n```\n\n\n\n\n\nAbove, we created four input with the following label\n\n• username\n• email\n• name\n• password\n\nLastly, a submit button was added to submit the form.\nThe style.sass for the signup.component.sass\nLets add some styles for the signup form to make it look pretty.\n\n```html \nheight: 100%;\n\nbody \n    height: 100%;\n    display: -ms-flexbox;\n    display: -webkit-box;\n    display: flex;\n    -ms-flex-align: center;\n    -ms-flex-pack: center;\n    -webkit-box-align: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    justify-content: center;\n    padding-top: 40px;\n    padding-bottom: 40px;\n    background-color: #f5f5f5;\n\n.form-control\n    padding: 10px;\n\n.form-signin \n    width: 100%;\n    max-width: 420px;\n    padding: 15px;\n    margin: 0 auto;\n\n.form-label-group \n    position: relative;\n    margin-bottom: 1rem;\n\n\n.form-label-group > input, .form-label-group > label \n    padding: var(--input-padding-y) var(--input-padding-x);\n\n\n.form-label-group > label \n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 100%;\n    margin-bottom: 0; /* Override default `<label>` margin */\n    line-height: 1.5;\n    color: #495057;\n    border: 1px solid transparent;\n    border-radius: .25rem;\n    transition: all .1s ease-in-out;\n\n\n.form-label-group input::-webkit-input-placeholder \n    color: transparent;\n\n\n.form-label-group input:-ms-input-placeholder \n    color: transparent;\n\n\n.form-label-group input::-ms-input-placeholder \n    color: transparent;\n\n\n.form-label-group input::-moz-placeholder \n    color: transparent;\n\n\n.form-label-group input::placeholder \n    color: transparent;\n\n\n.form-label-group input:not(:placeholder-shown) \n    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));\n    padding-bottom: calc(var(--input-padding-y) / 3);\n\n\n.form-label-group input:not(:placeholder-shown) ~ label \n    padding-top: calc(var(--input-padding-y) / 3);\n    padding-bottom: calc(var(--input-padding-y) / 3);\n    font-size: 12px;\n    color: #777;\n\n.signup__container\n    margin-top: 80px;</code>\n```\n\n\n#### Building the auth service\n\nIn building the auth service, we need to list out things we want to do. We would be working on signing up a user for our application, what do we need to signup a user?\nThe following would be needed\n\n• A user data.\nAn endpoint to send a post request of users data\nSo lets begin building the auth service.\nWe need to import the following modules into the service\n\n• HttpClient and HttpHeaders for making request and setting headers respectively.\n• Observable for monitoring stream of data.\n• Subject to set a variable as an observable.\n• User interface that has all the properties of the user which we created before.\n• Catch error, map, tap are used for receiving data and error handling.\n\n\n```import { HttpClient, HttpHeaders } from '@angular/common/http';\nimport { Observable } from 'rxjs/Observable';\nimport { of} from 'rxjs/observable/of';\nimport {Subject } from 'rxjs/Subject';\nimport { User } from '../user';\nimport { catchError, map, tap, } from 'rxjs/operators'\n```\n\nIn the auth service class, lets create three new variables to store the endpoint, signup data and the Http client. The http variable has a type of the import HttpClient.\n\n```private http: HttpClient;\nsignupEndpoint = 'http://localhost:3000/api/users';\nsignupData: any;\n```\n\nNext up a create the headerOptions and instantiate the HttpClient in the constructor, this would make the module available once the service is called.\n\n ```httpOptions = {\n    headers: new HttpHeaders({\n      'Content-Type':  'application/json',\n    })\n  };\n\n  constructor(http: HttpClient) {\n    this.http = http;\n  }\n```\n\nFinally we create the observable method for sending the signup data to the server.\n\n```signup (signupData): Observable<{} | User> {\n    return this.http.post<User>(this.signupEndpoint, JSON.stringify(signupData), this.httpOptions)\n       .pipe(\n         tap(data => console.log(`${data} user created`)),\n         catchError(this.handleError('signup', {}))\n       )\n\n  }\n```\n\nThe signup method, accepts a signupData and return an observable, we send a post request to the signupEndpoint which is http://localhost:3000/api/users which contains the header options and the signupdata. we use pipe to receive the response from the server and check if there was an error.\nComplete auth service.\n\n\n```import { Injectable } from '@angular/core';\nimport { HttpClient, HttpHeaders } from '@angular/common/http';\nimport { Observable } from 'rxjs/Observable';\nimport { of} from 'rxjs/observable/of';\nimport {Subject } from 'rxjs/Subject';\nimport { User } from '../user';\nimport { catchError, map, tap, } from 'rxjs/operators';\n\n@Injectable()\nexport class AuthService {\n  private http: HttpClient;\n  signupEndpoint = 'http://localhost:3000/api/users';\n  signupData: any;\n\n  httpOptions = {\n    headers: new HttpHeaders({\n      'Content-Type':  'application/json',\n    })\n  };\n\n  constructor(http: HttpClient) {\n    this.http = http;\n  }\n}\n```\n\n\n#### Building the signup method.\n\nOpen the file signup.component.ts and lets import some modules we would be working with.\n\n```import { Component, OnInit } from '@angular/core';\nimport { AuthService } from '../auth.service';\nimport {User} from '../../user';\n```\n\nWe imported the Auth service into the component for injection into the constructor method of the signup component class.\nCreate three variable; message, data and signupData.\nThe message variable would be used to hold message instance from the server and the signupData would be gotten from the form input using two way data binding.\n\n```data: any;\n  message: string = '';\n  signupData :User = {\n    \"username\": '',\n    \"password\": '',\n    \"name\": '',\n    \"email\": ''\n  }\n```\n\nThe signupData has a type of the User interface.\nInject the auth service into the constructor method\n\n```constructor(private AuthService : AuthService) { }```\n\n\nFinally, lets write the signup method\n\n\n```signup () {\n    this.AuthService.signup(this.signupData)\n        .subscribe(res => {\n          this.data = res;\n          this.message = this.data.data['message'];\n          this.signupData.username = '';\n          this.signupData.password = '';\n          this.signupData.name = '';\n          this.signupData.email = '';\n        }, err => {\n          this.message = err.error.msg;\n        });\n  }\n```\n\nIn the method, we use the signup method on the AuthService and pass the signupData to it and subscribe for a response from the server.\nWe set the data and message variable to the response from the server and finally we set the strings to empty once the form is processed.\n\n```this.signupData.username = '';\nthis.signupData.password = '';\nthis.signupData.name = '';\nthis.signupData.email = '';\n```\n\n\n\n\n\n\n\n#### Resource\n\n\n* https://angular.io/docs\n\n* https://getbootstrap.com/docs/4.0/getting-started/introduction/\n\n\n* https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\n\n\n#### Proof of Work Done\nhttps://github.com/sarayulis/angular",
      "json_metadata": "{\"links\":[\"https://github.com/angular/angular\",\"https://getbootstrap.com/\",\"http://localhost:3000/api/users\",\"http://localhost:3000/api/users\",\"http://localhost:3000/api/users\",\"https://angular.io/docs\",\"https://getbootstrap.com/docs/4.0/getting-started/introduction/\",\"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\",\"https://github.com/sarayulis/angular\"],\"image\":[],\"users\":[\"Injectable\"],\"tags\":[\"utopian-io\",\"tutorials\"],\"app\":\"esteem/1.6.0\",\"format\":\"markdown+html\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Deleted"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T14:40:00",
  "trx_id": "a7cef0ecde78eb5db44ae9c95fa227d4980c5119",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 23227852,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -85,8 +85,105 @@\n utopian.\n+ whether you are already very sure that I take the content on the web, insyaAllah I didn't do it.\n",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"mcfarhat\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "mcfarhat",
      "parent_permlink": "re-sarayulis-tutorial-building-angularjs-20180611t105433779z",
      "permlink": "re-mcfarhat-re-sarayulis-tutorial-building-angularjs-20180611t111211614z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T12:00:06",
  "trx_id": "85ee9e2b28dc3192598dee0bef6e0bd8928ee537",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 23226898,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "Hello sir @mcfarhat thank you, do you can't consider before you decide to ban me in utopian.",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"mcfarhat\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "mcfarhat",
      "parent_permlink": "re-sarayulis-tutorial-building-angularjs-20180611t105433779z",
      "permlink": "re-mcfarhat-re-sarayulis-tutorial-building-angularjs-20180611t111211614z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T11:12:24",
  "trx_id": "dc8056f88e2f54a1a749cb50f0c614f2a305d444",
  "trx_in_block": 58,
  "virtual_op": 0
}

{
  "block": 23226617,
  "op": [
    "comment",
    {
      "author": "mcfarhat",
      "body": "Please review comment on your other post, confirming ban of your account from receiving Utopian Reviews.\n\n---- \nNeed help? Write a ticket on https://support.utopian.io/. \nChat with us on [Discord](https://discord.gg/uTyJkNm). \n[[utopian-moderator]](https://join.utopian.io/)",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://support.utopian.io/\",\"https://discord.gg/uTyJkNm\",\"https://join.utopian.io/\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "permlink": "re-sarayulis-tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534-20180611t105815930z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T10:58:21",
  "trx_id": "af6bed9f0a431944d1ab244b7a01b7c62de72753",
  "trx_in_block": 24,
  "virtual_op": 0
}

{
  "block": 23226583,
  "op": [
    "comment",
    {
      "author": "mcfarhat",
      "body": "@@ -224,16 +224,78 @@\n ancies.%0A\n+- You forked the whole Angular repository as %22proof of work%22!%0A\n - You cr\n",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://support.utopian.io/\",\"https://discord.gg/uTyJkNm\",\"https://join.utopian.io/\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-building-angularjs",
      "permlink": "re-sarayulis-tutorial-building-angularjs-20180611t105433779z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T10:56:39",
  "trx_id": "f6dff8100dcd0e6c589c201674c12ccbd3ad3522",
  "trx_in_block": 13,
  "virtual_op": 0
}

{
  "block": 23226544,
  "op": [
    "comment",
    {
      "author": "mcfarhat",
      "body": "This is clearly not your work.\n- Your English language content v/s your response to the moderator's comment shows the difference.\n- The content of your tutorial is clearly copied from elsewhere due to the formatting discrepancies.\n- You created two tutorials on two different languages consecutively.\nYour account has been accordingly banned from receiving Utopian Reviews.\n\n---- \nNeed help? Write a ticket on https://support.utopian.io/. \nChat with us on [Discord](https://discord.gg/uTyJkNm). \n[[utopian-moderator]](https://join.utopian.io/)",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://support.utopian.io/\",\"https://discord.gg/uTyJkNm\",\"https://join.utopian.io/\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-building-angularjs",
      "permlink": "re-sarayulis-tutorial-building-angularjs-20180611t105433779z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T10:54:39",
  "trx_id": "074a245891f2cb2e27a17936ba5debcf7a33e118",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 23225355,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"sarayulis\",\"following\":\"davinci.witness\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "sarayulis"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T09:55:09",
  "trx_id": "2351351e6302f06311b3516630b3353f00359192",
  "trx_in_block": 65,
  "virtual_op": 0
}

{
  "block": 23225267,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"sarayulis\",\"following\":\"utopian-io\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "sarayulis"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T09:50:45",
  "trx_id": "fd5dc8d6fe5f7eb87e795e4cc3df6b48b1ce30b8",
  "trx_in_block": 45,
  "virtual_op": 0
}

{
  "block": 23225254,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"reblog\",{\"account\":\"sarayulis\",\"author\":\"utopian-io\",\"permlink\":\"translations-are-coming-back-to-utopian-get-involved-today\"}]",
      "required_auths": [],
      "required_posting_auths": [
        "sarayulis"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T09:50:06",
  "trx_id": "bf0cd7a7cad68875edddd78e6d260e5133502844",
  "trx_in_block": 41,
  "virtual_op": 0
}

{
  "block": 23221205,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "voter": "mys",
      "weight": 500
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T06:27:39",
  "trx_id": "ec42324551a7b9ce1e3df83bb43d641ce114d3a7",
  "trx_in_block": 53,
  "virtual_op": 0
}

{
  "block": 23214594,
  "op": [
    "account_update",
    {
      "account": "sarayulis",
      "active": {
        "account_auths": [],
        "key_auths": [
          [
            "STM5k36Bq8ek9ke895k5CcnXzeV5qSZgFAhYq1DfMh23xQeWxjsRa",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "json_metadata": "{\"profile\":{\"cover_image\":\"\",\"profile_image\":\"https://img.esteem.ws/furxulfowv.jpg\",\"name\":\"Sarayulis\",\"location\":\"Semantung\"}}",
      "memo_key": "STM8dALTvTBpV4WtrdF7BQyytc27R7hgn35k4LpatGdXM2fTcBTV2",
      "owner": {
        "account_auths": [],
        "key_auths": [
          [
            "STM5gtMEAZySV8ZfEd8YpWgR7YdByyTMLa8Bt9kwdp88p7vdeo6sE",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "posting": {
        "account_auths": [],
        "key_auths": [
          [
            "STM6FAMc1wyK373TRhtndyyH9TMyZWcoueZp2bJUejNi22dpk9GFd",
            1
          ]
        ],
        "weight_threshold": 1
      }
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:50:18",
  "trx_id": "e499fd4f456ccbe71d988f66714bd21aa9b7ef1e",
  "trx_in_block": 43,
  "virtual_op": 0
}

{
  "block": 23214018,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"sarayulis\",\"following\":\"portugalcoin\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "sarayulis"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:20:06",
  "trx_id": "b4fc2d1fe330bc10e2a4c8e7bdf9103f6b3e4f4a",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 23213961,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -10290,16 +10290,78 @@\n basic-components\n+%0A%0A%0A%0A#### Proof of Work Done%0Ahttps://github.com/sarayulis/react\n",
      "json_metadata": "{\"links\":[\"https://github.com/facebook/react\",\"https://nodejs.org/\",\"https://npmjs.com/\",\"https://yarnpkg.com/\",\"https://github.com/\",\"https://reactjs.org/\",\"http://localhost:300/add\",\"http://localhost:3000\",\"https://github.com/jamiebuilds/react-loadable\",\"https://reacttraining.com/react-router/web/guides/basic-components\",\"https://github.com/sarayulis/react\"],\"tags\":[\"utopian-io\",\"tutorials\",\"steemit\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "title": "Tutorial  Setting up route based transitions, Creating our First Custom Component,Dynamically Fetching Authors in CSS-in-JS React App"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:17:09",
  "trx_id": "5b81529068f8ccda19f2209c9dd61d6a3b261c2a",
  "trx_in_block": 24,
  "virtual_op": 0
}

{
  "block": 23213887,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "voter": "swagger",
      "weight": 250
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:13:15",
  "trx_id": "06f4f20752d26c7f698fe53232ee2f8d242ce79b",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 23213884,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "Hello sir @portugalcoin I've done it.",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"portugalcoin\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "portugalcoin",
      "parent_permlink": "re-sarayulis-tutorial-building-angularjs-20180610t224836702z",
      "permlink": "re-portugalcoin-re-sarayulis-tutorial-building-angularjs-20180611t001258292z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:13:06",
  "trx_id": "227b920be1b33bb00f4a3b37cc18e90d430d2015",
  "trx_in_block": 45,
  "virtual_op": 0
}

{
  "block": 23213859,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -9409,8 +9409,71 @@\n buu3aLrv\n+%0A%0A%0A#### Proof of Work Done%0Ahttps://github.com/sarayulis/angular\n",
      "json_metadata": "{\"links\":[\"https://github.com/angular/angular\",\"https://getbootstrap.com/\",\"http://localhost:3000/api/users\",\"https://angular.io/docs\",\"https://getbootstrap.com/docs/4.0/getting-started/introduction/\",\"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\",\"https://github.com/sarayulis/angular\"],\"tags\":[\"utopian-io\",\"tutorials\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Tutorial Building Angularjs"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-11T00:11:48",
  "trx_id": "3101cb439c090da127587af32c59db61dac8525b",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 23212291,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "Okey sir @portugalcoin  Thank you for your advice, I will be better in the future.",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"users\":[\"portugalcoin\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "portugalcoin",
      "parent_permlink": "re-sarayulis-tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534-20180610t223449781z",
      "permlink": "re-portugalcoin-re-sarayulis-tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534-20180610t224913814z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:49:30",
  "trx_id": "0f85d1b272cf944166dbd88aa2a30b878bb20906",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 23212275,
  "op": [
    "comment",
    {
      "author": "portugalcoin",
      "body": "Please put in your tutorial <b>Proof of Work Done</b>.\n\nSee the template <a href=\"https://github.com/utopian-io/editor-templates/blob/master/tutorials\">here</a>.\n\n---- \nNeed help? Write a ticket on https://support.utopian.io/. \nChat with us on [Discord](https://discord.gg/uTyJkNm). \n[[utopian-moderator]](https://join.utopian.io/)",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://github.com/utopian-io/editor-templates/blob/master/tutorials\",\"https://support.utopian.io/\",\"https://discord.gg/uTyJkNm\",\"https://join.utopian.io/\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-building-angularjs",
      "permlink": "re-sarayulis-tutorial-building-angularjs-20180610t224836702z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:48:36",
  "trx_id": "0589a1c81c0c2a3ef0fa1124f89d1ede5fbd05e5",
  "trx_in_block": 43,
  "virtual_op": 0
}

{
  "block": 23212016,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "zapncrap",
      "weight": 3000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:35:03",
  "trx_id": "1ebb4d00f51ef0e8c53f6698105708f4fbe3c20a",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 23212013,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "curx",
      "weight": 3000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:34:54",
  "trx_id": "28cc76d3e7958e0c6fc1dd5dd46b7300fbb3486b",
  "trx_in_block": 27,
  "virtual_op": 0
}

{
  "block": 23212011,
  "op": [
    "comment",
    {
      "author": "portugalcoin",
      "body": "Thank you for your contribution.\nWhile I liked the content of your contribution, I would still like to extend few advices for your upcoming contributions: \n\n- <b>Tutorial content:</b> There are parts of the code that have little explanation, try to explain as much as possible.\n- <b>Structure of the tutorial:</b> Improve the structure of the tutorial.\n\n- Try to come up with new and more innovative/useful ways to utilize React.\n\nLooking forward to your upcoming tutorials.\n\nYour contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.\n\nTo view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/32144423).\n\n---- \nNeed help? Write a ticket on https://support.utopian.io/. \nChat with us on [Discord](https://discord.gg/uTyJkNm). \n[[utopian-moderator]](https://join.utopian.io/)",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://join.utopian.io/guidelines\",\"https://review.utopian.io/result/8/32144423\",\"https://support.utopian.io/\",\"https://discord.gg/uTyJkNm\",\"https://join.utopian.io/\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "permlink": "re-sarayulis-tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534-20180610t223449781z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:34:48",
  "trx_id": "d5aec46c042ce4c9910257a996b325a69a7f6a27",
  "trx_in_block": 68,
  "virtual_op": 0
}

{
  "block": 23211961,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "ubg",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:32:09",
  "trx_id": "cc13c8ec5b40f77dc1a94361cab8ea289a8ded5d",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 23211844,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "smartmediagroup",
      "weight": 175
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:25:57",
  "trx_id": "4ee6d315105e28f414045571d75b65472532ab4d",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 23211817,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -4725,144 +4725,9 @@\n add \n-and you should see a screen like the one below.%0A%0A%0AWhew, we've covered a lot today. With that done, we are through with this installment.\n+%0A\n %0A%0A%0A#\n@@ -5210,16 +5210,17 @@\n 's edit \n+%60\n src/cont\n@@ -5238,16 +5238,17 @@\n index.js\n+%60\n  and get\n@@ -5749,16 +5749,17 @@\n calling \n+%60\n this.pro\n@@ -5773,16 +5773,17 @@\n hAuthors\n+%60\n  in this\n@@ -5962,16 +5962,17 @@\n e usual \n+%60\n mapState\n@@ -5978,21 +5978,23 @@\n eToProps\n+%60\n  and \n+%60\n mapDispa\n@@ -6003,16 +6003,17 @@\n hToProps\n+%60\n  where w\n@@ -6024,32 +6024,33 @@\n t to define the \n+%60\n fetchAuthors met\n@@ -6045,16 +6045,17 @@\n hAuthors\n+%60\n  method \n@@ -6462,16 +6462,17 @@\n ly used \n+%60\n fetchAut\n@@ -6482,16 +6482,17 @@\n sRequest\n+%60\n  action \n@@ -6513,24 +6513,25 @@\n 'll add the \n+%60\n fetchAuthors\n@@ -6537,16 +6537,17 @@\n sRequest\n+%60\n  method \n@@ -6549,24 +6549,25 @@\n thod to the \n+%60\n actions.js f\n@@ -6564,16 +6564,17 @@\n tions.js\n+%60\n  file at\n@@ -6570,24 +6570,25 @@\n js%60 file at \n+%60\n src/screens/\n@@ -6591,18 +6591,19 @@\n ens/Home\n-. \n+%60 %0A\n We're si\n@@ -6700,16 +6700,17 @@\n tch the \n+%60\n ADD_AUTH\n@@ -6720,16 +6720,17 @@\n _REQUEST\n+%60\n  action \n@@ -7035,16 +7035,17 @@\n tion at \n+%60\n src/scre\n@@ -7060,18 +7060,19 @@\n /saga.js\n-. \n+%60 %0A\n We'll st\n@@ -9259,16 +9259,17 @@\n ing the \n+%60\n SET_AUTH\n@@ -9276,16 +9276,17 @@\n ORS_DATA\n+%60\n  constan\n@@ -9386,16 +9386,17 @@\n for our \n+%60\n SET_AUTH\n@@ -9403,16 +9403,17 @@\n ORS_DATA\n+%60\n  action \n",
      "json_metadata": "{\"links\":[\"https://github.com/facebook/react\",\"https://nodejs.org/\",\"https://npmjs.com/\",\"https://yarnpkg.com/\",\"https://github.com/\",\"https://reactjs.org/\",\"http://localhost:300/add\",\"http://localhost:3000\",\"https://github.com/jamiebuilds/react-loadable\",\"https://reacttraining.com/react-router/web/guides/basic-components\"],\"tags\":[\"utopian-io\",\"tutorials\",\"steemit\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "title": "Tutorial  Setting up route based transitions, Creating our First Custom Component,Dynamically Fetching Authors in CSS-in-JS React App"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T22:24:33",
  "trx_id": "3cff9159fc4080012dc1ca1caff2a2d354615f2c",
  "trx_in_block": 108,
  "virtual_op": 0
}

{
  "block": 23210663,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -9063,29 +9063,25 @@\n %22: %22\n-Felipe Andres Coronel\n+Sara Youlist Bust\n %22,%0A \n@@ -9139,14 +9139,17 @@\n %22: %22\n-Eminem\n+Sarayulis\n %22,%0A \n@@ -9175,24 +9175,20 @@\n %22: %22\n-Marshall Mathers\n+Sara Youlist\n %22,%0A \n@@ -9204,14 +9204,13 @@\n %22: %22\n-eminem\n+yulis\n .jpg\n@@ -9234,13 +9234,12 @@\n %22: %22\n-Andre\n+Sara\n  300\n@@ -9260,13 +9260,12 @@\n %22: %22\n-andre\n+sara\n -300\n",
      "json_metadata": "{\"links\":[\"https://github.com/facebook/react\",\"https://nodejs.org/\",\"https://npmjs.com/\",\"https://yarnpkg.com/\",\"https://github.com/\",\"https://reactjs.org/\",\"http://localhost:300/add\",\"http://localhost:3000\",\"https://github.com/jamiebuilds/react-loadable\",\"https://reacttraining.com/react-router/web/guides/basic-components\"],\"tags\":[\"utopian-io\",\"tutorials\",\"steemit\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "title": "Tutorial  Setting up route based transitions, Creating our First Custom Component,Dynamically Fetching Authors in CSS-in-JS React App"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:26:27",
  "trx_id": "a2fcaabf76b4c823d2dd77a039604a1f2f8889b3",
  "trx_in_block": 40,
  "virtual_op": 0
}

{
  "block": 23210651,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "voter": "properfraction",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:25:51",
  "trx_id": "cf8c7088a12e3d22054ca966c4d0dc76ecb8c30f",
  "trx_in_block": 71,
  "virtual_op": 0
}

{
  "block": 23210643,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "voter": "properfraction",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:25:27",
  "trx_id": "d4a341f8fb35c21ec3901cb15f9fd6acf5c3434d",
  "trx_in_block": 37,
  "virtual_op": 0
}

{
  "block": 23210592,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -377,84 +377,8 @@\n IDE%0A\n-%E2%80%A2 %5BVoltront front client Repository%5D(https://github.com/ogbiyoyosky/voltron)\n %0A%0A##\n@@ -9413,46 +9413,4 @@\n aLrv\n-%0A%0A* https://github.com/ogbiyoyosky/voltron",
      "json_metadata": "{\"links\":[\"https://github.com/angular/angular\",\"https://getbootstrap.com/\",\"http://localhost:3000/api/users\",\"http://localhost:3000/api/users\",\"http://localhost:3000/api/users\",\"https://angular.io/docs\",\"https://getbootstrap.com/docs/4.0/getting-started/introduction/\",\"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\"],\"image\":[],\"users\":[\"Injectable\"],\"tags\":[\"utopian-io\",\"tutorials\"],\"app\":\"esteem/1.6.0\",\"format\":\"markdown+html\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Tutorial Building Angularjs"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:22:54",
  "trx_id": "28e4fb90cc93b0aa48e895bf52beaa11fe6d5b74",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 23210515,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "voter": "nafestw",
      "weight": 6280
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:19:03",
  "trx_id": "d144652d601d72747437fe3b5d0ee91ce93a5448",
  "trx_in_block": 26,
  "virtual_op": 0
}

{
  "block": 23210450,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "tutorial-building-angularjs",
      "voter": "r351574nc3",
      "weight": 125
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:15:48",
  "trx_id": "90c1e4b1a9aa9024b1345ec838c6074002b788c8",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 23210163,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -451,16 +451,44 @@\n ltron)%0A%0A\n+#### Difficulty%0A* Advanced%0A%0A\n #### Cre\n",
      "json_metadata": "{\"tags\":[\"utopian-io\",\"tutorials\"],\"links\":[\"https://github.com/angular/angular\",\"https://getbootstrap.com/\",\"https://github.com/ogbiyoyosky/voltron\",\"http://localhost:3000/api/users\",\"https://angular.io/docs\",\"https://getbootstrap.com/docs/4.0/getting-started/introduction/\",\"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Tutorial Building Angularjs"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:01:27",
  "trx_id": "b093dfe73f23d6658775ab01b22ad8a43d128900",
  "trx_in_block": 75,
  "virtual_op": 0
}

{
  "block": 23210140,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "@@ -585,22 +585,17 @@\n over to \n-%3Ccode%3E\n+%60\n src/cont\n@@ -613,23 +613,17 @@\n index.js\n-%3C/code%3E\n+%60\n  and get\n@@ -796,16 +796,17 @@\n  from %0A%0A\n+%60\n src/comp\n@@ -831,26 +831,24 @@\n /fade.js\n+%60\n %0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import %7B\n@@ -960,24 +960,20 @@\n s/fade%22;\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -1147,22 +1147,19 @@\n nt.%0A%0A%0A%0A \n-%3Ccode%3E\n+%60%60%60\n %3CTransit\n@@ -1629,24 +1629,20 @@\n nsition%3E\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -1657,16 +1657,17 @@\n reate %0A%0A\n+%60\n src/comp\n@@ -1692,16 +1692,17 @@\n /fade.js\n+%60\n  and add\n@@ -1881,30 +1881,27 @@\n s for it.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import React\n@@ -2183,24 +2183,20 @@\n nsition;\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0AFinal\n@@ -2257,22 +2257,19 @@\n fect.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n %3Cstyle t\n@@ -2498,24 +2498,20 @@\n %3C/style%3E\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0A%0A####\n@@ -2656,24 +2656,25 @@\n now. Create \n+%60\n src/componen\n@@ -2692,16 +2692,17 @@\n tarea.js\n+%60\n  and we'\n@@ -2911,30 +2911,27 @@\n  system.%0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import React\n@@ -3029,24 +3029,20 @@\n -system'\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -3406,30 +3406,27 @@\n  intact.%0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n const border\n@@ -3801,33 +3801,28 @@\n %0A    %7D%0A  %7D%0A%7D\n-%3C/code%3E%0A%0A\n+%0A%60%60%60\n %0A%0ANext, I am\n@@ -4044,30 +4044,27 @@\n a value.%0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n const Textar\n@@ -4086,17 +4086,16 @@\n xtarea')\n-%60\n %0A    app\n@@ -4405,17 +4405,16 @@\n ray')%7D;%0A\n-%0A\n     padd\n@@ -4657,24 +4657,20 @@\n pace%7D;%0A'\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0AFire u\n@@ -5645,30 +5645,27 @@\n  actions.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import %7B wit\n@@ -5800,24 +5800,20 @@\n ctions';\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0AWe'll\n@@ -5956,22 +5956,19 @@\n elow.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n class Ap\n@@ -6060,24 +6060,20 @@\n ()%0A    %7D\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -6276,22 +6276,19 @@\n ot%22.%0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n const ma\n@@ -6541,24 +6541,20 @@\n )(App));\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -6859,22 +6859,19 @@\n saga.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import %7B\n@@ -7050,24 +7050,20 @@\n %0A    %7D%0A%7D\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0ANext,\n@@ -7540,30 +7540,27 @@\n ayload).%0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n import %7B get\n@@ -7937,24 +7937,20 @@\n     %7D)%0A%7D\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0A%0AWe'l\n@@ -7994,24 +7994,25 @@\n ts. Editing \n+%60\n src/containe\n@@ -8030,25 +8030,22 @@\n tants.js\n-.%0A%0A%3Ccode%3E\n+%60%0A%0A%60%60%60\n export c\n@@ -8203,24 +8203,20 @@\n EQUEST';\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0AWe'll \n@@ -8505,20 +8505,14 @@\n n.%0A%0A\n-%3Ccode%3E\n %60%60%60js\n-%0A\n+ \n impo\n@@ -8818,24 +8818,20 @@\n ta));%0A%7D;\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0AIt's n\n@@ -8943,16 +8943,17 @@\n  Create \n+%60\n src/asse\n@@ -8972,16 +8972,17 @@\n ors.json\n+%60\n  and add\n@@ -8995,22 +8995,19 @@\n data.%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n %5B%7B%0A    %22\n@@ -9281,27 +9281,23 @@\n .jpg%22%0A%7D%5D\n-%3C/code%3E\n+%0A%60%60%60\n %0A%0A%0A\n-%0A\n Great! A\n@@ -9672,14 +9672,11 @@\n %0A%0A%0A%0A\n-%3Ccode%3E\n+%60%60%60\n impo\n@@ -10066,16 +10066,12 @@\n  %7D%0A%7D\n-%3C/code%3E%0A\n+%0A%60%60%60\n %0A%0A%0AH\n",
      "json_metadata": "{\"links\":[\"https://github.com/facebook/react\",\"https://nodejs.org/\",\"https://npmjs.com/\",\"https://yarnpkg.com/\",\"https://github.com/\",\"https://reactjs.org/\",\"http://localhost:300/add\",\"http://localhost:3000\",\"https://github.com/jamiebuilds/react-loadable\",\"https://reacttraining.com/react-router/web/guides/basic-components\"],\"tags\":[\"utopian-io\",\"tutorials\",\"steemit\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"community\":\"esteem\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-setting-up-route-based-transitions-creating-our-first-custom-component-dynamically-fetching-authors-in-css-in-js-react-67701a9f13534",
      "title": "Tutorial  Setting up route based transitions, Creating our First Custom Component,Dynamically Fetching Authors in CSS-in-JS React App"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T21:00:18",
  "trx_id": "6dcd40ff22d0a7e70acfaa7522a128889bc3bbce",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 23209856,
  "op": [
    "comment",
    {
      "author": "a-0-1",
      "body": "Go here https://steemit.com/@a-a-a to get your post resteemed to over 72,000 followers.",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"links\":[\"https://steemit.com/@a-a-a\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "tutorial-building-angularjs",
      "permlink": "re-sarayulis-tutorial-building-angularjs-20180610t204605026z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T20:46:06",
  "trx_id": "96fec4a9d55050bf4c57b0c8cb2c994e05e5081d",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 23209847,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "#### Repository\nhttps://github.com/angular/angular\n\n\n#### What Will I Learn?\n**I Will learn :**\n• Creating the markup and styles for the Signup component.\n• Building the auth service.\n• Building the signup method.\n\n\n#### Requirement.\n• Typescript version 2.4.2\n• Node version version 8.9.4\n• Npm version 5.6.0\n• [Bootstrap 4.0](https://getbootstrap.com/)\n• Visual Studio Code IDE\n• [Voltront front client Repository](https://github.com/ogbiyoyosky/voltron)\n\n#### Creating the markup and styles for the Signup component.\n\nIn this project we are using bootstrap 4, you are expected to have some knowledge of bootstrap 4, teaching bootstrap 4 is beyond the scope of this tutorial. Below is the markup for the`signup.component.html`\n\n```<div class=\"signup__container\">\n  <div class=\"container\">\n      <form class=\"form-signin\"  #signupForm=\"ngForm\">\n        <div class=\"text-left mb-4\">\n          <h1 class=\"h3 mb-3 font-weight-normal\">Create an Account</h1>\n          <p> Create a free Voltron account to order any kind of food. Already have a Voltron account? <a  class=\"link\" routerLink=\"/login\">Log in here</a></p>\n        </div>\n        \n    \n        <div class=\"form-label-group\">\n          <input type=\"name\" id=\"inputName\" class=\"form-control\"placeholder=\"Full Name\" required autofocus>\n          <label for=\"inputName\">Name</label>\n        </div>\n\n        <div class=\"form-label-group\">\n            <input type=\"username\" id=\"inputUsername\" class=\"form-control\"  placeholder=\"Username\" required autofocus>\n            <label for=\"inputUsername\">Username</label>\n        </div>\n\n        <div class=\"form-label-group\">\n            <input type=\"email\" id=\"inputEmail\" class=\"form-control\" placeholder=\"Email address\" required autofocus>\n            <label for=\"inputEmail\">Email address</label>\n        </div>\n    \n        <div class=\"form-label-group\">\n          <input type=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Password\"  required>\n          <label for=\"inputPassword\">Password</label>\n        </div>\n    \n        <div class=\"checkbox mb-3\">\n          <label>\n            <input type=\"checkbox\" value=\"remember-me\"> Remember me\n          </label>\n        </div>\n        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Create Account</button>\n        <p class=\"mt-5 mb-3 text-muted text-center\">&copy; 2017-2018</p>\n      </form>\n  </div>\n</div>\n\n```\n\n\n\n\n\nAbove, we created four input with the following label\n\n• username\n• email\n• name\n• password\n\nLastly, a submit button was added to submit the form.\nThe style.sass for the signup.component.sass\nLets add some styles for the signup form to make it look pretty.\n\n```html \nheight: 100%;\n\nbody \n    height: 100%;\n    display: -ms-flexbox;\n    display: -webkit-box;\n    display: flex;\n    -ms-flex-align: center;\n    -ms-flex-pack: center;\n    -webkit-box-align: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    justify-content: center;\n    padding-top: 40px;\n    padding-bottom: 40px;\n    background-color: #f5f5f5;\n\n.form-control\n    padding: 10px;\n\n.form-signin \n    width: 100%;\n    max-width: 420px;\n    padding: 15px;\n    margin: 0 auto;\n\n.form-label-group \n    position: relative;\n    margin-bottom: 1rem;\n\n\n.form-label-group > input, .form-label-group > label \n    padding: var(--input-padding-y) var(--input-padding-x);\n\n\n.form-label-group > label \n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 100%;\n    margin-bottom: 0; /* Override default `<label>` margin */\n    line-height: 1.5;\n    color: #495057;\n    border: 1px solid transparent;\n    border-radius: .25rem;\n    transition: all .1s ease-in-out;\n\n\n.form-label-group input::-webkit-input-placeholder \n    color: transparent;\n\n\n.form-label-group input:-ms-input-placeholder \n    color: transparent;\n\n\n.form-label-group input::-ms-input-placeholder \n    color: transparent;\n\n\n.form-label-group input::-moz-placeholder \n    color: transparent;\n\n\n.form-label-group input::placeholder \n    color: transparent;\n\n\n.form-label-group input:not(:placeholder-shown) \n    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));\n    padding-bottom: calc(var(--input-padding-y) / 3);\n\n\n.form-label-group input:not(:placeholder-shown) ~ label \n    padding-top: calc(var(--input-padding-y) / 3);\n    padding-bottom: calc(var(--input-padding-y) / 3);\n    font-size: 12px;\n    color: #777;\n\n.signup__container\n    margin-top: 80px;</code>\n```\n\n\n#### Building the auth service\n\nIn building the auth service, we need to list out things we want to do. We would be working on signing up a user for our application, what do we need to signup a user?\nThe following would be needed\n\n• A user data.\nAn endpoint to send a post request of users data\nSo lets begin building the auth service.\nWe need to import the following modules into the service\n\n• HttpClient and HttpHeaders for making request and setting headers respectively.\n• Observable for monitoring stream of data.\n• Subject to set a variable as an observable.\n• User interface that has all the properties of the user which we created before.\n• Catch error, map, tap are used for receiving data and error handling.\n\n\n```import { HttpClient, HttpHeaders } from '@angular/common/http';\nimport { Observable } from 'rxjs/Observable';\nimport { of} from 'rxjs/observable/of';\nimport {Subject } from 'rxjs/Subject';\nimport { User } from '../user';\nimport { catchError, map, tap, } from 'rxjs/operators'\n```\n\nIn the auth service class, lets create three new variables to store the endpoint, signup data and the Http client. The http variable has a type of the import HttpClient.\n\n```private http: HttpClient;\nsignupEndpoint = 'http://localhost:3000/api/users';\nsignupData: any;\n```\n\nNext up a create the headerOptions and instantiate the HttpClient in the constructor, this would make the module available once the service is called.\n\n ```httpOptions = {\n    headers: new HttpHeaders({\n      'Content-Type':  'application/json',\n    })\n  };\n\n  constructor(http: HttpClient) {\n    this.http = http;\n  }\n```\n\nFinally we create the observable method for sending the signup data to the server.\n\n```signup (signupData): Observable<{} | User> {\n    return this.http.post<User>(this.signupEndpoint, JSON.stringify(signupData), this.httpOptions)\n       .pipe(\n         tap(data => console.log(`${data} user created`)),\n         catchError(this.handleError('signup', {}))\n       )\n\n  }\n```\n\nThe signup method, accepts a signupData and return an observable, we send a post request to the signupEndpoint which is http://localhost:3000/api/users which contains the header options and the signupdata. we use pipe to receive the response from the server and check if there was an error.\nComplete auth service.\n\n\n```import { Injectable } from '@angular/core';\nimport { HttpClient, HttpHeaders } from '@angular/common/http';\nimport { Observable } from 'rxjs/Observable';\nimport { of} from 'rxjs/observable/of';\nimport {Subject } from 'rxjs/Subject';\nimport { User } from '../user';\nimport { catchError, map, tap, } from 'rxjs/operators';\n\n@Injectable()\nexport class AuthService {\n  private http: HttpClient;\n  signupEndpoint = 'http://localhost:3000/api/users';\n  signupData: any;\n\n  httpOptions = {\n    headers: new HttpHeaders({\n      'Content-Type':  'application/json',\n    })\n  };\n\n  constructor(http: HttpClient) {\n    this.http = http;\n  }\n}\n```\n\n\n#### Building the signup method.\n\nOpen the file signup.component.ts and lets import some modules we would be working with.\n\n```import { Component, OnInit } from '@angular/core';\nimport { AuthService } from '../auth.service';\nimport {User} from '../../user';\n```\n\nWe imported the Auth service into the component for injection into the constructor method of the signup component class.\nCreate three variable; message, data and signupData.\nThe message variable would be used to hold message instance from the server and the signupData would be gotten from the form input using two way data binding.\n\n```data: any;\n  message: string = '';\n  signupData :User = {\n    \"username\": '',\n    \"password\": '',\n    \"name\": '',\n    \"email\": ''\n  }\n```\n\nThe signupData has a type of the User interface.\nInject the auth service into the constructor method\n\n```constructor(private AuthService : AuthService) { }```\n\n\nFinally, lets write the signup method\n\n\n```signup () {\n    this.AuthService.signup(this.signupData)\n        .subscribe(res => {\n          this.data = res;\n          this.message = this.data.data['message'];\n          this.signupData.username = '';\n          this.signupData.password = '';\n          this.signupData.name = '';\n          this.signupData.email = '';\n        }, err => {\n          this.message = err.error.msg;\n        });\n  }\n```\n\nIn the method, we use the signup method on the AuthService and pass the signupData to it and subscribe for a response from the server.\nWe set the data and message variable to the response from the server and finally we set the strings to empty once the form is processed.\n\n```this.signupData.username = '';\nthis.signupData.password = '';\nthis.signupData.name = '';\nthis.signupData.email = '';\n```\n\n\n\n\n\n\n\n#### Resource\n\n\n* https://angular.io/docs\n\n* https://getbootstrap.com/docs/4.0/getting-started/introduction/\n\n\n* https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\n\n* https://github.com/ogbiyoyosky/voltron",
      "json_metadata": "{\"tags\":[\"utopian-io\",\"tutorials\"],\"links\":[\"https://github.com/angular/angular\",\"https://getbootstrap.com/\",\"https://github.com/ogbiyoyosky/voltron\",\"http://localhost:3000/api/users\",\"https://angular.io/docs\",\"https://getbootstrap.com/docs/4.0/getting-started/introduction/\",\"https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=2&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwjc4_SPkoPbAhUFwBQKHTQ-ANIQFgg8MAE&amp;url=http%3A%2F%2Fsass-lang.com%2Fdocumentation%2F&amp;usg=AOvVaw2Q4oSAkr7seUJ2buu3aLrv\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "tutorial-building-angularjs",
      "title": "Tutorial Building Angularjs"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T20:45:39",
  "trx_id": "5b4f1d18e2295fdd6e98c943413b1345a5b074e9",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 23206036,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "voter": "akc174ru",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:35:00",
  "trx_id": "2f47ac72d82af020e23f1a2ad93625afb15ab167",
  "trx_in_block": 89,
  "virtual_op": 0
}

{
  "block": 23205787,
  "op": [
    "comment",
    {
      "author": "nellita66",
      "body": "Bienvenido a este negocio, puede aprender muchas técnicas en este enlace: https://discord.gg/hrjxG4G\nBienvenido a este negocio, puede aprender muchas técnicas en este enlace: https://discord.gg/hrjxG4G",
      "json_metadata": "{\"tags\":[\"steemmonsters\"],\"links\":[\"https://discord.gg/hrjxG4G\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "permlink": "re-sarayulis-fantasy-story-edward-and-the-knight-and-story-of-the-lembu-20180610t172316545z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:22:33",
  "trx_id": "309bddb66199b44772a96244c4b0b3bb2c869d38",
  "trx_in_block": 50,
  "virtual_op": 0
}

{
  "block": 23205720,
  "op": [
    "vote",
    {
      "author": "allnatural",
      "permlink": "re-sarayulis-fantasy-story-edward-and-the-knight-and-story-of-the-lembu-20180610t170453495z",
      "voter": "sarayulis",
      "weight": -10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:19:12",
  "trx_id": "f9e04e9e478b4fc951f0ef641182079cb2108e67",
  "trx_in_block": 47,
  "virtual_op": 0
}

{
  "block": 23205706,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "When Lembu Sura finds the hiding place of the princess and approaches the princess. Then the princess said '' Congratulations Raden Wimba, you have won the contest with a splendid ''\n\nAnswer the Lembu Sura '' Thank you Princess and you will be my wife ''\n\nPrincess '' I know that. But I still ask one more condition ''\n\nLrmbu Sura '' Tell the Princess, what is your condition? ''\n\nPrincess '' Make me a well at the top of Mount Kelud! Well water that we will wear both after finished marriage ceremony ''\n\nLembu Sura '' Well Princess ''\n\nWith its incredible magic, Lembu Sura makes a well with the spirits it possesses to dig the top of Kelud mountain.\n\nBut the King knew the conditions in his daughter was very because the King also did not accept if his son married a berkrlepala cow. Eventually King Brawijaya found a way to destroy the Lembu Sura. Lembusura should be stockpiled in wells digging themselves. But the king gave orders to all the soldiers to drop the Ox of Sura into the Well. For a while the soldiers were able to throw the Ox at the bottom of the well.\n\nBut when Lembu Sura fell into the well he bwrkata king '' King Brawijaya, you are a cunning king. I can repay you. The hidden thing is my body is not my life. Remember, every 2 years I will ruin your land and your kingdom ''\n\nUp to now, if Mount Kelud erupts, it is considered as the raging of Lembu Sura to take revenge on the actions of King Brawijaya.\n\nThus the Legend Story is to meet the contest @steemmonsters. And part of this story I quote from the story of rakya, the legend and the history of the kingdom In Indonesia.",
      "json_metadata": "{\"tags\":[\"steemmonsters\",\"writing\",\"story\",\"steemit\"],\"users\":[\"steemmonsters\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "steemmonsters",
      "permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "title": "Story of the Lembu"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:18:30",
  "trx_id": "05855b3056a9afe9c1be782ae3a512135aaf66f7",
  "trx_in_block": 32,
  "virtual_op": 0
}

{
  "block": 23205535,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"sarayulis\",\"following\":\"steemmonsters\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "sarayulis"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:09:57",
  "trx_id": "8afd963733bce984cec250859386be46b59360b2",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 23205487,
  "op": [
    "claim_reward_balance",
    {
      "account": "sarayulis",
      "reward_sbd": "0.022 SBD",
      "reward_steem": "0.000 STEEM",
      "reward_vests": "10.232962 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:07:33",
  "trx_id": "01c47f77685c1d02952f31f68508bf3c8ed4119a",
  "trx_in_block": 56,
  "virtual_op": 0
}

{
  "block": 23205434,
  "op": [
    "comment",
    {
      "author": "allnatural",
      "body": "Go here https://steemit.com/@a-a-a to get your post resteemed to over 72,000 followers.",
      "json_metadata": "{\"tags\":[\"steemmonsters\"],\"links\":[\"https://steemit.com/@a-a-a\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "sarayulis",
      "parent_permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "permlink": "re-sarayulis-fantasy-story-edward-and-the-knight-and-story-of-the-lembu-20180610t170453495z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:04:54",
  "trx_id": "533f8f8d1bb6a2ef15dcda2544a71e6c15fcfe6a",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 23205429,
  "op": [
    "comment",
    {
      "author": "cheetah",
      "body": "Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:\nhttps://steemit.com/steemmonsters/@journeyoflife/edward-and-the-knight-dragon-fansty-story-neoxian",
      "json_metadata": "",
      "parent_author": "sarayulis",
      "parent_permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "permlink": "cheetah-re-sarayulisfantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:04:39",
  "trx_id": "610f26322a753fbfff303760bd3c2d8bcc8f0081",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 23205428,
  "op": [
    "vote",
    {
      "author": "sarayulis",
      "permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "voter": "cheetah",
      "weight": 8
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:04:36",
  "trx_id": "bd9bc7eb86ec5c099ab82aab9ff368da21dd3f36",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 23205424,
  "op": [
    "comment",
    {
      "author": "sarayulis",
      "body": "Edward was the most youthful knight in the kingdom. He was still essentially a kid, however was so overcome and wise that, without fighting anybody by any means, he had vanquished every one of his adversaries.\n\nMulti day, while riding through the mountains, he ran over a little give in. On entering it he discovered it was tremendous, and that inside was a great palace, so huge that he figured the mountain couldn't be genuine, and that it more likely than not been a veneer put there to conceal the manor.\n\nOn nearing the manor, Edward heard the sound of voices. Without dithering, he moved over the manor dividers, and took after the voices.\n\n\"Anyone here?\" he inquired.\n\n\"Help! Help us!\" came the reaction from inside, \"we've been secured here for a considerable length of time, serving the palace winged serpent.\"\n\n\n\"Winged serpent?\" thought Edward, just before a huge flying fire relatively consumed him alive. Edward spun quietly around, and tending to the awful winged serpent up close and personal, stated: \"It's good, Dragon. I pardon you for what you simply did. You most likely didn't have any acquaintance with it was me.\"\n\nThe mythical beast was extremely shocked at words like these. He never anticipated that anybody would confront him, and positively not in such a bold way.\n\n\"Get ready to battle, predominate! I don't give a fig your identity!\" thundered the mythical serpent.\n\n\n\"Hold up a minute. All things considered, plainly you don't know my identity. I am the watchman of the Great Crystal Sword!\" proceeded with Edward, who - before battling - was fit for making a wide range of things up. \"You understand that the sword has executed many monsters and mythical serpents, and that in the event that I unsheathe it, it will fly straight into your neck and slaughter you.\"\n\nThe winged serpent had never known about such a sword, however this scared him. He positively didn't care for the sound of something cutting his throat. Edward carried on talking.\n\n\"Regardless, I need to allow you to battle me. How about we travel to the opposite side of the world. Over yonder there's a snow-secured mountain, and at the summit there's an incredible pinnacle. At the highest point of the pinnacle there's a brilliant pen where a wizard made this sword. There the sword loses all its energy. I'll be there, however will sit tight for you for five days.\"\n\nOn saying that, Edward raised a dust storm and vanished. The monster thought Edward had played out some sort of enchantment, yet he had just covered up in a few shrubs. Needing to battle with that impudent knight, the monster rapidly flew out of the give in, towards the opposite side of the world, in an excursion which kept going over multi month.\n\nAt the point when Edward was certain the mythical beast was far away, he left his concealing spot, entered the château, and set free every one of the detainees inside. Some had been absent for a long time, and when they returned home everybody commended Edward's extraordinary insight.\n\nWhat's more, shouldn't something be said about the monster? Indeed, would you be able to trust that on the opposite side of the world there was extremely a frigid mountain with a major pinnacle to finish everything, and a gold pen over that?\n\nWell yes, the winged serpent pressed into the pen and couldn't get out; and there he remains, trusting that somebody savvy will multi day come and safeguard him.\n\n\nWhen Lembu Sura finds the hiding place of the princess and approaches the princess. Then the princess said '' Congratulations Raden Wimba, you have won the contest with a splendid ''\n\nAnswer the Lembu Sura '' Thank you Princess and you will be my wife ''\n\nPrincess '' I know that. But I still ask one more condition ''\n\nLrmbu Sura '' Tell the Princess, what is your condition? ''\n\nPrincess '' Make me a well at the top of Mount Kelud! Well water that we will wear both after finished marriage ceremony ''\n\nLembu Sura '' Well Princess ''\n\nWith its incredible magic, Lembu Sura makes a well with the spirits it possesses to dig the top of Kelud mountain.\n\nBut the King knew the conditions in his daughter was very because the King also did not accept if his son married a berkrlepala cow. Eventually King Brawijaya found a way to destroy the Lembu Sura. Lembusura should be stockpiled in wells digging themselves. But the king gave orders to all the soldiers to drop the Ox of Sura into the Well. For a while the soldiers were able to throw the Ox at the bottom of the well.\n\nBut when Lembu Sura fell into the well he bwrkata king '' King Brawijaya, you are a cunning king. I can repay you. The hidden thing is my body is not my life. Remember, every 2 years I will ruin your land and your kingdom ''\n\nUp to now, if Mount Kelud erupts, it is considered as the raging of Lembu Sura to take revenge on the actions of King Brawijaya.\n\nThus the Legend Story is to meet the contest @steemmonsters. And part of this story I quote from the story of rakya, the legend and the history of the kingdom In Indonesia.",
      "json_metadata": "{\"tags\":[\"steemmonsters\",\"writing\",\"story\",\"steemit\"],\"users\":[\"steemmonsters\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "steemmonsters",
      "permlink": "fantasy-story-edward-and-the-knight-and-story-of-the-lembu",
      "title": "Fantasy story Edward and the knight and Story of the Lembu"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-10T17:04:24",
  "trx_id": "16cefae86bb82237d9516d05bf18ef993cf97442",
  "trx_in_block": 103,
  "virtual_op": 0
}