Angular export html - html

Whats up! I have a question - maybe banal, maybe not. I need to remove the HTML code to a file after generating it in the component. And everything would be cool, if not for the fact that if I do it
document.getElementById ('summary').outerHTML
or
this.summaryReport.nativeElement.innerHTML
I`ve
#ViewChild('summaryReport') summaryReport: ElementRef;
html:
<div #summaryReport id="summary" class="summary">
<div class="row border border-secondary">
<div class="col-md">
<h2> Podsumowanie sprzedaży biletów </h2>
</div>
</div>
<div class="row">
<ng-container *ngFor="let d of sortedData |keyvalue">
<div class="row">{{d.key}}</div>
<div class="col-md">
<table class="table">
<thead>
<th>{{'Ticket name'|translate}}</th>
<th>{{'Price'|translate }}</th>
<th>{{'Quantity'|translate}}</th>
</thead>
<tbody>
<tr *ngFor="let el of d.value">
<td>{{el.ticketName}}</td>
<td>{{el.price / 100}}</td>
<td>{{el.quantity}}</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</div>
</div>
</div>
in the verse I get 'bindings = {}' in place of ngFor.
Can anyone tell me what I do not understand?: D

I`ve answer.
Time....
I'm trying to generate a variable too quickly. After added another method to send html , work fine

Related

jQuery Wrapping a Table

I'm trying to use jquery in order to replicate the styling from another description tab that uses a table.
This is the current code of what I want to apply the script on:
<table class="shop_attributes">
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_size">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_size</strong>
<div class="iconic-cffv-field__content"><p>66 x 81 x 77</p></div>
</div>
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_weight">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_weight</strong>
<div class="iconic-cffv-field__content"><p>146</p></div>
</div>
</table>
</div> </div>
This is what I'm trying to replicate:
<div class="cPanel cPanel--additional_information cPanel--ord-3">
<div class="cPanel-inner">
<h2>More Details</h2>
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--weight">
<th class="woocommerce-product-attributes-item__label">Weight</th>
<td class="woocommerce-product-attributes-item__value" data-o_content="N/A">164 lbs</td>
</tr>
</tbody></table>
</div> </div>
I've tried the following to start off with but can't seem to have any of the tags apply at all
(function($) {
// Wrap attributes into table format
$(".iconic-cffv-field__label.iconic-cffv-field__label--above").wrapAll("<th></th>");
$(".iconic-cffv-field__content").wrapAll("<td></td>");
}

How to make bootstrap column width based on longest column for each row?

The issue
I have a list with two columns. My issue is that I want the left column to start where the based on where the first columns longest column is ending. At the moment it starts right after the first.
What do I have to do to make the second columns start where the longest first column ends?
How it looks vs Result I want
What I have tried
I have tried to use row-fluid with col on the first column and col my-auto on the last column. It does looks right at a middle sized screen.
But on smaller screens like cellphones the text is going over each other. And on larger screens the text is just way to far from each other.
Snippet from code in The code section
<div class="row fluid">
<div class="col">
<label id="key" for="object.key"><b>{{object.key}}:</b></label>
</div>
<div class="col my-auto">
<label id="object.key">{{object.value}}</label>
</div>
</div>
I tried to read the documentation at https://getbootstrap.com/docs/4.0/utilities/flex/ but couldn't locate what would fix my problem.
The code
I have made a simple Two Column Array component in Angular. I use bootstrap for styling. The idea is to show a list of information inside a card dynamically.
HTML
<ng-container>
<div class="card">
<div class="card-header">
<div class="card-fluid" *ngFor="let object of ListObjects" ng-class-odd='odd'>
<div class="d-flex">
<div class="mt-1">
<label id="key" for="object.key"><b>{{object.key}}:</b></label>
</div>
<div class="mt-1">
<label id="object.key">{{object.value}}</label>
</div>
</div>
</div>
</div>
</div>
</ng-container>
Ts
import { Component, Input, OnInit } from '#angular/core';
import { ListTwoColumnObject } from '#models/list-two-column';
#Component({
selector: 'app-two-column-list',
templateUrl: './two-column-list.component.html',
styleUrls: ['./two-column-list.component.css']
})
export class TwoColumnListComponent {
#Input() ListObjects: ListTwoColumnObject[];
constructor() { }
}
TwoColumnObject
export class ListTwoColumnObject {
key: any;
value: any;
constructor(key: any, value: any){
this.key = key;
this.value = value;
}
}
Example of creating list
const objList = Array<ListTwoColumnObject>();
objList.push(new ListTwoColumnObject('Fakturanr.', invoice.invoiceNr));
objList.push(new ListTwoColumnObject('Betalt', convertBool.transform(invoice.isPaid)));
objList.push(new ListTwoColumnObject('Ordre opprettet',
datePipe.transform(invoice.orderDate,'yyyy.MM.dd')));
To respond to your comment, “…will a table wrap the columns under each other if the screen gets smaller? I want to avoid having a vertical scroll.” — no, a table will not put one row beneath another to fit — tables just get smaller, but you only have two columns of data, and if your example is representative of the data you want to display, you should be okay on even an old smartphone with a 320px wide display.
As for avoiding a vertical scroll, if your content exceeds the screen height, then the display will scroll.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" lang="no">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="card">
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<th scope="row">Fakturanr.:</th>
<td>100</td>
</tr>
<tr>
<th scope="row">Betalt:</th>
<td>Ja</td>
</tr>
<tr>
<th scope="row">Ordre opprettet:</th>
<td>2021.01.06</td>
</tr>
<tr>
<th scope="row">Forfalls Dato:</th>
<td>2021.01.16</td>
</tr>
<tr>
<th scope="row">Opprettet av:</th>
<td>edit</td>
</tr>
<tr>
<th scope="row">Ordre type:</th>
<td>Oppgjort for sent</td>
</tr>
<tr>
<th scope="row">Beløp:</th>
<td>450</td>
</tr>
<tr>
<th scope="row">Innbetalt:</th>
<td>-450</td>
</tr>
<tr>
<th scope="row">Rest beløp:</th>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

How to use a local variable inside quotes in angular 4 (HTML) with ngFor?

I'm using Angular2-Collapsible for my project. On clicking the table row, I want the details to be displayed. The code is attached below. Basically if I add [detail]= "detail1" then the collapsible-table-row-detail would be displayed on click. But since I'm using a for loop, I have to use the variable i. I've tried [detail]= "'detail'+i" and [attr.detail]= "'detail'+i". Nothing seems to be working.
<collapsible-table [type]="'accordion'" borderedVertically="true" class="table">
<thead class="table-heading">
<collapsible-table-row>
<th></th>
<th>Reference ID</th>
<th>Order ID</th>
<th> OName</th>
<th>FP</th>
<th>SP</th>
<th>Stat</th>
<th>date</th>
</collapsible-table-row>
</thead>
<tbody>
<collapsible-table-row *ngFor="let detail of details; let i = index" [attr.data-index]="i" [detail]="'detail'{{i}}">
<td><div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst"><span class="bulleticon"> - </span></i><i class="material-icons" *ngIf="!showFirst"><span class="bulleticon"> + </span> </i>{{detail.Reference_Id}}<br></td>
<td> {{detail.OId}} </td>
<td>{{detail.OName}}</td>
<td>{{detail.FP}}</td>
<td>{{detail.SP}}</td>
<td>{{detail.Stat}} </td>
<td>{{detail.date}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5">
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data1 </li>
<li> data2 </li>
<li> data3</li>
</ul>
</div>
</div>
</tbody>
</collapsible-table-row-detail>
Thanks in advance!
Edit: Here's a stackblitz implmentation of what I'm trying to acheive. I've used [detail]= "detail1" for demo purposes. But I need to use a variable "i" in the for loop.
Visit https://stackblitz.com/edit/angular-fw5upv.
Try using
[detail]=" 'detail' + i "
Or
detail="detail{{i}}"
Try this:
<tbody>
<ng-container *ngFor="let detail of details; let i = index" >
<collapsible-table-row [attr.data-index]="i" [detail]="detail1">
<td>
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td >6565</td>
<td> {{detail.oid}} </td>
<td>{{detail.pname}}</td>
<td>{{detail.price}}</td>
<td>{{detail.qoh}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5" >
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data4 </li>
<li> data5</li>
<li> data6 </li>
</ul>
</div>
</div>
</collapsible-table-row-detail>
</ng-container>
</tbody>
You can check in your stackblitz just replace the html code.
You could try using a method in your HTML like:
[detail]="getDetail(i)"
And then in your ts file:
getDetail(i: number) {
return 'detail' + i;
}
I have not tried this myself, so I'm not sure if it will work.

Unnecessary Horizontal Scrollbar in AngularJS/Bootstrap application

I am trying to create an application using bootstrap and angularjs as practice and a simplified version of my application is illustrated in this pen: http://codepen.io/megadeen/pen/ZWrGmv
This is the main code:
<table class="main" ng-app="app" ng-controller="main">
<tr>
<td class="sidebar">
<!-- Set page using AngularJS -->
<a ng-click="page = 'fpage'">First Page</a>
<br>
<a ng-click="page = 'spage'">Second Page</a>
</td>
<td class="content">
<!-- First Page -->
<div class="fpage" ng-show="page == 'fpage'">
<div class="col-md-5">
.... Content ....
</div>
</div>
</div>
<!-- Second Page -->
<div class="spage" ng-show="page == 'spage'">
<div class="row">
<div class="col-md-7">
.... Content ....
</div>
</div>
</td>
</tr>
</table>
However, there's always this stray horizontal scrollbar that won't go away. This stray scrollbar only appears in the second and subsequent pages.
I tried adding the row class to the fpage and spage divs. However, if I do so, then the scrollbar appears in all pages.
Why does this happen and how do I correct this problem?
You should use col-md-12 instead of row.

CSS: Horizontal scroll for each row in table

I have the following markup(using AngularJS):
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<table class="col-sm-12 table-bordered">
<tbody>
<tr ng-repeat="grid in grids">
<td class="bold" style="text-align:center;width:10% !important"> {{grid.Left}}
<div>
({{grid.Count}})
</div>
</td>
<td style="width:90%">
<div stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}">
<svg style='height:200px'> </svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am planning to set the SVG's width dynamically according to the data passed to the angular directive 'stack-bar'.
As you can see each row in the table has a variable width multibar chart plotted using the angular directive.
The problem I am facing is that some rows may exceed the width of the table due to the SVG's(which is wrapped in the second 'td' of the row) width. Consequentially, I want such rows to have a individual horizontal scrollbars.
I tried setting a fixed width to each row and applied overflow-x: scroll to the second 'td' which contains the bar chart. But this doesn't work. Any suggestions on what I can do? Should I not use a table?
Well, turns out not using a table was a good idea. Here's the new markup:
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<div ng-repeat="grid in grids" class="row">
<div class="col-sm-2" style="padding-top:70px;text-align:center">
<div>
<span>{{grid.Left}}</span>
</div>
<div>
<span>({{grid.Count}})</span>
</div>
</div>
<div class="col-sm-10" stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}" style="overflow-x:scroll"> //scroll here
<svg style='height:200px'> </svg>
</div>
</div>
</div>
</div>
However, I would still like to see a solution with the table!