html – Angular Questions

Dec 18,2018

While zooming the page TEXT is overlapping with the Image

While zooming the page TEXT is overlapping with the Image, I am sharing my screenshot, Please look into that and can you please give me the solution.
Thanks in Advance…

This is the css Code, While zooming the page TEXT is overlapping with the Image,

.Pad{
    padding: 60px 0px;
    margin-top: -300px;
 }

 body {
    margin: 0;
}

.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px;   }

.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}

This is the HTML code, While zooming the page TEXT is overlapping with the Image,

<div class="col-12 col-12 p-0">
                        <div class="col-6 float-left">
                            <div class="outer-div-for-the-imgae-icon">
                                <app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
                                    class="d-none d-sm-block" alt="..."></app-image>
                                <i (click)="inputFile.click()" style="color : white;left: 180px; 
                                position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255); 
                                border-radius: 50%;font-size: 12px;"
                                    class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                            </div>

                            <div class="col-6 Pad float-right">
                                <div class="col-sm ">

                                    <span class="name">
                                        <b style="color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}
                                            {{myprofile?.LastName}}</b>
                                    </span>
                                </div>

                                <div class="col-sm">

                                    <span class="name">
                                        <p>{{myprofile?.Role}}</p>
                                    </span>
                                </div>

                                <div class="col-sm">

                                    <span class="name">
                                        <p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div id="over" style="position:absolute; width:100%; height:100%">
                                <img src="https//i.stack.imgur.com/assets/images/MyProfile_Summary_1x.png">
                            </div>

                        <div style="padding-left: 100px;" class="col-6 float-right">
                            <div class="col-12 ">
                                <div class="office-address-heading">
                                    <p class="Address">Office Address</p>
                                </div>
                                <div class="d-flex align-items-center">
                                    <!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
                                    <address class="mb-0 size">
                                        {{myprofile?.OfficeAddress}}
                                    </address>
                                </div>
                            </div>
                            <hr />
                            <div class="col-12">
                                <div class="office-address-heading">
                                    <p class="Address">Communication Details</p>
                                </div>
                                <div class="d-flex align-items-center office-address-details ">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style ="right: 14px;">
                                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 float-left">
                                        <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                        <a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}
                                        </a>
                                    </div>
                                    <div class="d-flex1 col-xs-12 col-sm-12 col-md-8 col-lg-7 align-items-center office-address-details float-right ">
                                        <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                        <a style="color: black;" href="mailto:[email protected]">{{myprofile?.Email}}
                                        </a>
                                    </div>
                                </div>
                                </div>
                            </div>

                        </div>
                    </div>

        <!-- end snippet -->

Source: Angular

by 13design

angular, html, typescript Dec 18,2018

Angular – setting custom variables from different location (file)

I am using Angular 6 and see in home.component.ts file variable being defined at the beginning: public hasResults = false;

And then in home.component.html file – section for displaying:

<span style="padding-left:5px" [hidden]="hasResults">
    <ang-shortcut-display></ang-shortcut-display>
</span>

(which will display section once hasResults is not False anymore).

Now I need to have action on a Home Button to hide section again (I am assuming to set hasResults to False again).

How to set this variable hasResults to False again when e.g. someone hits Home button.

So far I found that action after hitting Home Button is in home.component.ts

homeRouteAction() {
     set hasResults to false
}

but not sure if hasResults is visible at that moment and how properly to set it to false (pass value) so that can change value (and set above html section to hidden again)?

Source: Angular

by 13design

angular, css, html, javascript, jquery Dec 18,2018

how to load child components in home component

Hi have been working on a angular project in version 7 and ima new to angular frame work. my problem is content still visible in the parent component after loading child component. what i have done is i have created thhree components header footer home. header footer i want load as usual constant for all pages. home component i have taken as body content part to load all my child components. Now i can able to load child component in home component but home component content still visible the content which i initially loaded when page loads as body part. please help me give and idea to solve this problem.

thanks in advance

Source: Angular

by 13design

Dec 17,2018

HashLocationstrategy not working in angular 6 application

I’m working on angular 6 application. I want to use HashLocationstrategy in my application. My UI looks like this:

So, now when the user clicks the “Link Sub Campaign” i’m taking the user to a new tab in the browser to select the required sub campaign to bind and post linking i’m returning the user to my angular application. Now when returning the user to my application, I want to return the user with a Hash.

For example: http://localhost:4200/#/campaign-details/2 ( Required Format )
http://localhost:4200/campaign-details/2 ( Actual Format I am getting )

Here is how my Component.html looks like:

<div class=" text-center">
  <h3 *ngIf="!SubCampaign">{{SubCampaign}}</h3>

  <a href="http://localhost:64674/portal/Campaigns/Edit/{{CampaignId}}" target="_blank" *ngIf="SubCampaign == null" class="btn btn-outline-primary "> <i class="zmdi zmdi-link zmdi-hc-fw"></i>Link SubCampaign</a>

</div>

And then the above link will take him to my back end which is a C# (web API) and my controller looks like this:

 public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Campaign campaign = db.Campaigns.Find(id);
            var subcampaign = db.SubCampaigns.Select(x => new {x.Id , x.Name }).ToList();

            if (campaign == null)
            {
                return HttpNotFound();
            }

            var cId = db.Campaigns.Where(x => x.Id == id);
            ViewBag.cmapId = cId;

            ViewBag.CampaignName = campaign.Name;

            ViewBag.SubCampaigns_Id = new SelectList(subcampaign, "Id", "Name");

            ViewBag.Department_Id = new SelectList(db.Departments, "Id", "Name", campaign.Department_Id);
            ViewBag.BeneficiaryGroup_Id = new SelectList(db.BeneficiaryGroups, "Id", "Name", campaign.BeneficiaryGroup_Id);
            return View(campaign);
        }

The above snippet has a view ( .cshtml ) for selecting sub-campaign. NOTE: (Didn’t mention the view code here.)

The http Post method for the above code looks like:

 [HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit([Bind(Include = "Id,Department_Id,Name,IsIVRCampaign,BeneficiaryGroup_Id,SubCampaigns_Id")] Linksubcampaign campaign)
        {
            if (ModelState.IsValid)
            {
                //db.Entry(campaign).State = EntityState.Modified;
                //db.SaveChanges();
                //return RedirectToAction("Index");
                var subcamp = db.SubCampaigns.Where(x => x.Id == campaign.SubCampaigns_Id).FirstOrDefault();

                subcamp.Campaign_Id = campaign.Id;
                db.SaveChanges();
                ViewBag.campId = campaign.Id;
                return View("ReturnUrl", new { CampaignId = ViewBag.campId });
            }

And I’m taking user to a “RetrunUrl” action method where I take back user back to the angular 6 application. The RetrunUrl action method controller and view page ( .cshtml ) page looks like this.

 public ActionResult ReturnUrl(int? CampaignId)
        {
            ViewBag.CampId = CampaignId;
            return View();
        }

<div class="hidden">
    <form action="http:localhost:4200/#/campaign-details/@ViewBag.CampId" method="post" id="returnForm">

        <input type="submit" />
    </form>
</div>
<script type="text/javascript">

    setTimeout(function () {
        $('form#returnForm').submit();
    }, 2000);

</script>

And here exactly is my problem. It is not returning with a hash value. Even I tried explicitly to keep a hash. Any suggestions where i’m going wrong. Much thanks in advance.

Source: Angular

by 13design

angular, angularjs, html Dec 14,2018

Two another icons for more/less link in list items Angular

I need two another icons for “More” (fa fa-chevron-down) and “Less” (fa fa-chevron-up) link. How can I change my code to achieve that while maintaining the functionality as below?

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets">
  <li ng-repeat="monograph in document.actUnitMonographViewList | limitTo: monograph.limit ? document.actUnitMonographViewList.length : 3">
  <!--<li ng-repeat="monograph in document.actUnitMonographViewList  track by $index">-->
  <i ng-if="document.actUnitMonographViewList.length > 1" class="fa fa-chevron-right"></i>
    <a href="" ng-href="{{ ::getPublicationLink(monograph, 'monograph') }}" ng-class="{'arrow-link': document.actUnitMonographViewList.length > 1}" user-preferences-target>
      {{::monograph.title}}
    </a>
  </li>
  <li ng-show="document.actUnitMonographViewList.length > 3">
    <i class="fa fa-chevron-down"></i>
    <a ng-click="monograph.limit = !monograph.limit" class="">{{monograph.limit ? 'Less' : 'More'}}</a>
  </li>
</ul>

Source: Angular

by 13design

Dec 12,2018

Angular 7 Material: Dialog doesn’t show properly

Below is a picture where you can see the dialog on the left side, where it cuts off part of my application. I will add the code. If there is some more information you need I will add that as soon as possible.

I already searched for solutions, but couldn’t find anything useful.

When I click on the button it opens the dialog with no content. And the dialog sticks on the left side of the screen where I can’t use the dialog.

I followed the steps in that tutorial: https://blog.angular-university.io/angular-material-dialog/.

I also added the dialog SendTXComponent as entryComponent in my app.module.ts.

HTML of the dialog (just for testing):

<h2 mat-dialog-title>Hallo</h2>

Typescript of the dialog:

export class SendTXDialogComponent implements OnInit {

  form: FormGroup;
  description: string;

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<SendTXDialogComponent>,
    @Inject(MAT_DIALOG_DATA) {description, longDescription,
      category}: TransactionInformation ) {

    this.description = description;


    this.form = fb.group({
      description: [description, Validators.required],
      category: [category, Validators.required],
      releasedAt: [moment(), Validators.required],
      longDescription: [longDescription, Validators.required]
    });

  }
}

Typescript of where the dialog gets opened:

  constructor(private dialog: MatDialog) { }

  openDialog() {

    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = false;

    this.dialog.open(SendTXDialogComponent, dialogConfig);

  }

On the left you can see the dialog

Source: Angular

by 13design

.net, angular, html, java, spring Dec 12,2018

Please, help me for to develop an application to stream more audio fluxes distribuite [on hold]

Sorry, someone can help me in this project?

In this project I am in a museum and I want to create an application for visitors who want to hear the audio descriptions of the various works in their own language. Moreover these audio must be played at the same time (for example: the tour starts at 4:00 pm, if I arrive late I will find the audio already playing). Basically there will need to be more audio streams (each in different languages). Suggestions on which technologies to use? Thank you :).

Source: Angular

by 13design

angular, angular-material, html, typescript Dec 10,2018

Dynamic form using *ngFor and submitting values from it

I have a stackblitz as a guide.

I am wanting to display a list of material cards that I click an ‘edit’ button, to which I can edit text fields, and when I click on the ‘save’ icon, it of course saves by triggering an function etc.

I am struggling however to get to grips with how this all works within Angular and the Material nature of my app.

html

<form id="myForm" [formGroup]="thisIsMyForm">
  <mat-card [formGroup]="x" *ngFor="let x of data; let i = index">
    <mat-form-field>
      <label for="{{x.name}}">Name</label>
      <input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}">
    </mat-form-field>
    <mat-form-field>
      <label for="{{x.type}}">Type</label>
      <input formControlName="type" id="{{x.type}}" matInput value="{{x.type}}"/>
    </mat-form-field>
  </mat-card>
</form>

ts

import { Component, ViewChild } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  thisIsMyForm: FormGroup

  data = [
    {name:"one", type:"one"},
    {name:"two", type:"two"},
    {name:"three", type:"three"},
  ];

  constructor(private formBuilder: FormBuilder) {}

  onSubmit() {
    // Here I would like to be able to access the values of the 'forms'
  }

}

Source: Angular

by 13design

angular, html, javascript, typescript Dec 9,2018

How can i create dynamicly html table with Angular 6

I have an array that has got 100 item inside it. I want to render this array in my html page as html table 10×10 (10 tr and each tr has 10 td). How can i do it in angular ?

  tableIndexTR = [];
  tableIndexTD = [];

  constructor(private data: TransferService) {}

  ngOnInit() {

    for (let _i = 1; _i <= 10; _i++) {
        this.tableIndexTR.push(_i);
    }

    for (let _j = 1; _j <= 10; _j++) {
        this.tableIndexTD.push(_j);
      }
  }


  <table style="width: 100%">
      <tr *ngFor="let item of tableIndexTR">
          <td *ngFor="let item of tableIndexTD">{{item}}</td>
      </tr>
   </table>

Source: Angular

by 13design

Category Archive html