app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { NotfoundComponent } from './notfound/notfound.component';
import {HomeComponent} from "./home/home.component";
import { ProfileComponent } from './profile/profile.component';
import { UserEditComponent } from './users/user-edit/user-edit.component';
import { UserShowComponent } from './users/user-show/user-show.component';
import { Angular2TokenService } from 'angular2-token';

const routes: Routes = [
  { path: '', component: HomeComponent,pathMatch: 'full'},
  { path: 'home',component: HomeComponent },
  { path: 'perfil', component: ProfileComponent , canActivate: [Angular2TokenService]},
  {path: '404', component: NotfoundComponent},
  {path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

company.rb

class Company < ApplicationRecord
  enum type: [ :cpf, :cnpj ]
  belongs_to :user
end

company.ts

export class Company {
  id: number;
  company_name: string;
  short_name: string;
  kind: string;
  cpf_cnpj: string;
  street: string;
  number: string;
  city: string;
  zipcode: string;
  state: string;
  neighborhood: string;
  phone: string;

 
  constructor(companyInfo:any) {
    this.id = companyInfo.id;
    this.company_name = companyInfo.company_name;
    this.short_name = companyInfo.short_name;
    this.kind = companyInfo.type;
    this.cpf_cnpj = companyInfo.cpf_cnpj;
    this.street = companyInfo.street;
    this.number = companyInfo.number;
    this.city = companyInfo.city;
    this.zipcode = companyInfo.zipcode;
    this.state = companyInfo.state;
    this.neighborhood = companyInfo.neighborhood;
    this.phone = companyInfo.phone;

    
  }
}

profile.component.html

<p>Form status: {{ editForm.status | json }}</p>
<form [formGroup]="editForm" (ngSubmit)="save()">
  <div class="row">
    <div class="col s12 ">
      <div class="card blue-grey lighten-5 z-depth-4" style="margin-top: 5em">
        <div class="card-content">
          <div  class="row ">
            <h4>Dados da conta:</h4>
            <ul class="collection grey-text text-darken-2">
            <div class="col s12 profile-box">
                <div *ngIf="user?.photo == null || user?.photo == ''">
                  <i class="fa fa-user-circle user-icon"></i>
                </div>
                <div *ngIf="user?.photo.url != null">
                  <div class="profile-picture" [ngStyle]="{'background-image': 'url(' + img + ')'}">
                  </div>
                </div>
                <input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".jpeg,.png,.jpg">
            </div>
 
            </ul>
            <div class="row">
              <div class="col s4" >
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Nome</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="name" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label data-error="Inválido" data-success="Válido" class="control-label" for="email">Email*</label>
                      <input id="email"  type="email"  class="form-control input-md" formControlName="email" 
                      required            
                    pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Apelido</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="nickname" >
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row">
            <h4>Dados empresarias:</h4>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Nome da empresa*</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="company_name" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Nome abreviado*</label>
                        <input id="textinput"  type="text"  class="form-control input-md" formControlName="short_name" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                        <label >Tipo:*</label>
                        <select  class="browser-default form-control" formControlName="kind" >
                          <option value="cpf">Cpf</option>
                          <option value="cnpj">Cnpj</option>
                        </select>
                        
                    </div>
                  </li>
                </ul>
              </div>
          </div>

          <div class="row">
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Cpf / Cnpj*</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="cpf_cnpj" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Telefone</label>
                        <input id="textinput"  type="text"  class="form-control input-md" formControlName="phone" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Cep</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="zipcode" >
                    </div>
                  </li>
                </ul>
              </div>
          </div>
          <div class="row">
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Endereço</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="street" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Núm/Complemento</label>
                        <input id="textinput"  type="text"  class="form-control input-md" formControlName="number" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Bairro</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="neighborhood" >
                    </div>
                  </li>
                </ul>
              </div>
          </div>
          <div class="row">
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label class="control-label" for="textinput">Cidade</label>
                      <input id="textinput"  type="text"  class="form-control input-md" formControlName="city" >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col s4">
                <ul class="collection grey-text text-darken-2">
                  <li class="collection-item">
                    <div class="form-group">
                      <label >Estado:</label>
                        <select  class="browser-default form-control" formControlName="state" >
                          <option value="Acre">Acre</option>
                          <option value="Alagoas">Alagoas</option> 
                          <option value="Amapá">Amapá</option> 
                          <option value="Amazonas">Amazonas</option> 
                          <option value="Bahia">Bahia</option> 
                          <option value="Ceará">Ceará</option> 
                          <option value="Distrito Federal">Distrito Federal</option> 
                          <option value="Espírito Santo">Espírito Santo</option> 
                          <option value="Maranhão">Maranhão</option> 
                          <option value="Mato Grosso">Mato Grosso</option> 
                          <option value="Mato Grosso do Sul">Mato Grosso do Sul</option> 
                          <option value="Minas Gerais">Minas Gerais</option> 
                          <option value="Pernambuco">Pernambuco</option> 
                          <option value="Piauí">Piauí</option>
                          <option value="Rio de Janeiro">Rio de Janeiro</option>
                          <option value="Rio Grande do Norte">Rio Grande do Norte</option>
                          <option value="Rio Grande do Sul">Rio Grande do Sul</option>
                          <option value="Rondônia">Rondônia</option>
                          <option value="Santa Catarina">Santa Catarina</option>
                          <option value="São Paulo">São Paulo</option>
                          <option value="Tocantins">Tocantins</option>
                        </select>
                    </div>
                  </li>
                </ul>
              </div>
          </div>
        </div>
        <div class="card-action clearfix">
          <button type="submit"
                [disabled]="!(editForm.valid)" 
                class="waves-effect waves-light btn blue right">
            Salvar
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

profile.component.ts

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

import { FormBuilder, Validators,  FormControl, FormGroup} from '@angular/forms';
import {Router} from "@angular/router";
import {AuthService} from "../services/auth.service";
import {Angular2TokenService} from "angular2-token";
import { UsersService } from '../shared/users.service';
import { Company } from '../shared/company';
import {NotificationsService} from 'angular2-notifications';
import { User } from './../shared/user';


@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  private user: User;
  public editForm: FormGroup;
  public img: any;
 
  constructor(public fb: FormBuilder, 
              private UsersService: UsersService, 
              private router: Router, 
              private NotificationsService: NotificationsService,
              private authService: AuthService) {

    this.editForm = this.fb.group({
      name: [""],
      email: ["", Validators.required],
      nickname: [""],
      company_name: ["", Validators.required],
      short_name: ["", Validators.required],
      kind: ["", Validators.required],
      cpf_cnpj: ["", Validators.required],
      street: [""],
      number: [""],
      city: [""],
      zipcode: [""],
      state: [""],
      neighborhood: [""],
      phone: [""],
      photo: "",
    });
  }
 

  // logOut(){
  //   this.authService.logOutUser().subscribe(() => this.router.navigate(['/']));
  // }

  ngOnInit() {
    this.UsersService.show()
      .subscribe(data => {
        this.user = new User(data);
        console.log(this.user);
        if(this.user.photo != null && this.user.photo != ""){
          this.img = this.user.photo.url;
        }
        this.editForm = this.fb.group({
          name: [this.user.name],
          email: [this.user.email, Validators.required],
          nickname: [this.user.nickname],
          company_name: [this.user.company.company_name,Validators.required],
          short_name: [this.user.company.short_name,Validators.required],
          kind: [this.user.company.kind,Validators.required],
          cpf_cnpj: [this.user.company.cpf_cnpj,Validators.required],
          phone: [this.user.company.phone],
          street: [this.user.company.street],
          number: [this.user.company.number],
          city: [this.user.company.city],
          zipcode: [this.user.company.zipcode],
          state: [this.user.company.state],
          neighborhood: [this.user.company.neighborhood],
          photo: "",
        });
      }
    );
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0];

    var myReader:FileReader = new FileReader();
 
    myReader.onloadend = (e) => {
      // you can perform an action with readed data here
      this.img = myReader.result;
    };
     myReader.readAsDataURL(file);
  }
 
  fileChange(event) {
    this.readThis(event.target);
  }

  save(){
    console.log(this.editForm.value)
    // this.UsersService.update(this.editForm.value, this.img)
    //   .subscribe(res => {
    //     this.NotificationsService.success(
    //       'Dados atualizados',
    //       'Sucesso \\o/',
    //       {
    //           timeOut: 5000,
    //           showProgressBar: true,
    //           pauseOnHover: false,
    //           clickToClose: true,
    //           maxLength: 30,
    //           lastOnBottom: true
    //       }
    //     );
    //     this.router.navigate(['/perfil']);
    //   }, error => {
    //     console.log(error.jon());
    //     this.NotificationsService.error(
    //       'Falha ao atualizar',
    //       'Tente novamente',
    //       {
    //           timeOut: 5000,
    //           showProgressBar: true,
    //           pauseOnHover: false,
    //           clickToClose: true,
    //           maxLength: 30,
    //           lastOnBottom: true
    //       }
    //     );
    //   }
    // );
  }
}

router.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      mount_devise_token_auth_for 'User', at: 'auth'
      put 'users', to: 'users#update'
      get 'current_user', to: 'users#current_user'
      resources :suppliers
      resources :companies
    end
  end
end

show.json.jbuilder

json.extract! @user, :id, :name, :nickname, :email, :photo, :created_at, :updated_at

json.company do
  json.extract! @user.company, :company_name, :short_name, :kind, :cpf_cnpj, :street, :number, :city, :zipcode, :state, :neighborhood, :phone if @user.company
end

user.rb

class User < ActiveRecord::Base
  # Include default devise modules.
# :confirmable,
  devise :database_authenticatable, :registerable,
          :recoverable, :rememberable, :trackable, :validatable,
           :omniauthable
  include DeviseTokenAuth::Concerns::User
  mount_base64_uploader :photo, PhotoUploader
  has_one :company, dependent: :destroy
end

user.service.ts

import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { Angular2TokenService, A2tUiModule} from 'angular2-token';
 
 
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../environments/environment';
 
 
@Injectable()
export class UsersService {
 
  constructor(private http: Http, private _tokenService: Angular2TokenService) { }
 
  // getWishlist(){
  //   return this._tokenService.get('users/wishlist', {}).map(res => res.json());
  // }
  show(){
    return this._tokenService.get('current_user', {}).map(res => res.json());
  }
 
  update(params, photo){
    console.log(params);

    return this._tokenService.put('users/', {"user":
                                              {"name": params.name,
                                              "email": params.email,
                                              "nickname": params.nickname,
                                              photo: photo},
                                              company: {"company_name": params.company_name,
                                                        "short_name": params.short_name,
                                                        "kind": params.kind,
                                                        "cpf_cnpj": params.cpf_cnpj,
                                                        "street": params.street,
                                                        "number": params.number,
                                                        "city": params.city,
                                                        "zipcode": params.zipcode,
                                                        "state": params.state,
                                                        "phone": params.phone,
                                                        "neighborhood": params.neighborhood
                                                        }
                                            }).map(res => res.json());
  }
}

user.ts

import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { Angular2TokenService, A2tUiModule} from 'angular2-token';
 
 
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../environments/environment';
 
 
@Injectable()
export class UsersService {
 
  constructor(private http: Http, private _tokenService: Angular2TokenService) { }
 
  // getWishlist(){
  //   return this._tokenService.get('users/wishlist', {}).map(res => res.json());
  // }
  show(){
    return this._tokenService.get('current_user', {}).map(res => res.json());
  }
 
  update(params, photo){
    console.log(params);

    return this._tokenService.put('users/', {"user":
                                              {"name": params.name,
                                              "email": params.email,
                                              "nickname": params.nickname,
                                              photo: photo},
                                              company: {"company_name": params.company_name,
                                                        "short_name": params.short_name,
                                                        "kind": params.kind,
                                                        "cpf_cnpj": params.cpf_cnpj,
                                                        "street": params.street,
                                                        "number": params.number,
                                                        "city": params.city,
                                                        "zipcode": params.zipcode,
                                                        "state": params.state,
                                                        "phone": params.phone,
                                                        "neighborhood": params.neighborhood
                                                        }
                                            }).map(res => res.json());
  }
}

user_controller.rb

class Api::V1::UsersController < ApplicationController
  before_action :authenticate_api_v1_user!
  # before_action :set_user, only: [:update]

  def update
    @user = current_api_v1_user
    begin
      if params[:company]
        if @user.company.present?
          @user.company.update(company_params)
        else
          @user.update(company: Company.create(company_params))
        end
      end
      @user.update(user_params)
      render template: '/api/v1/users/show', status: 200
    rescue Exception => errors
      render json: errors, status: :unprocessable_entity
    end
  end

  def current_user
    @user = current_api_v1_user
    render template: '/api/v1/users/show', status: 200
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    # def set_user
    #   @user = User.find(params[:id])
    # end

    # Never trust parameters from the scary internet, only allow the white list through.
    def user_params
      params.require(:user).permit(:name, :nickname, :photo, :email)
    end

    def company_params
      params.require(:company).permit(:company_name, :short_name, :kind, :cpf_cnpj, :street, :number, :city, :zipcode, :state, :neighborhood, :phone)
    end
end