File
Implements
Metadata
| selector |
app-saved-address |
| styleUrls |
saved-address.component.scss |
| templateUrl |
./saved-address.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
deleteAddress
|
deleteAddress(addressId: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| addressId |
string
|
no
|
|
|
editAddress
|
editAddress(selectedAddress: )
|
|
|
Parameters :
| Name |
Optional |
| selectedAddress |
no
|
|
|
selectedDeliveryAddress
|
selectedDeliveryAddress(address: Address)
|
|
|
Parameters :
| Name |
Type |
Optional |
| address |
Address
|
no
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Address } from '../../../core/models/address';
import { Store } from '@ngrx/store';
import { AppState } from '../../../interfaces';
import { UserActions } from '../../../user/actions/user.actions';
@Component({
selector: 'app-saved-address',
templateUrl: './saved-address.component.html',
styleUrls: ['./saved-address.component.scss']
})
export class SavedAddressComponent implements OnInit {
@Input() addressList;
selectedIndex: number;
@Output() getSelectedAddress = new EventEmitter<Object>();
@Output() editButtonPressed = new EventEmitter<Object>();
constructor(
private store: Store<AppState>,
private userAction: UserActions) { }
ngOnInit() {
}
editAddress(selectedAddress) {
this.editButtonPressed.emit(selectedAddress)
}
deleteAddress(addressId: string) {
this.store.dispatch(this.userAction.deleteUserAddress(addressId));
}
selectedDeliveryAddress(address: Address) {
this.getSelectedAddress.emit(address);
}
}
<div *ngIf="addressList">
<div *ngFor="let address of addressList | reverse; index as i" class="card mb-3">
<div class="address-row select card-body">
<div class="row ">
<div class="col-12 name">
<div class="">
<div class="col-md-3 col-2 p-0 float-left">
<button class='btn themebtnprimarybasic mb-3' (click)="selectedDeliveryAddress(address)">Deliver here</button>
</div>
<div class="col-md-6 col-2 float-right">
<div class="row float-right p-0 ">
<div class="col-md-6">
<button class='btn themebtnprimarybasic mb-3' (click)="editAddress(address)">Edit</button>
</div>
<div class="col-md-6">
<button class='btn themebtnprimarybasic mb-3' (click)="deleteAddress(address.id)">Delete</button>
</div>
</div>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-12 name">
<span class="name mr-2 ">{{address.first_name}}</span>
<span class="name mr-2 ">{{address.last_name}}</span>
<span class="mob ">{{address.phone}}</span>
</div>
<div class="address col-12 ">{{address.address_line_1}}
<span class="address-field ">{{address.address_line_2}}</span>,
<span class="address-field ">{{address.city}}</span>
<span class="address-field pin ">-{{address.zip_code}}</span>
</div>
<div class="address-field col-12">{{address?.state?.name}}</div>
<div class="address-field col-12">{{address.country.name}}</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive