Tips for displaying and accessing PDFs within a web browser using an HTML/Angular project

I'm looking to add a link to my resume on my personal website. Currently, I'm using the Angular template in Visual Studio 2017.

My PDF file is stored inside a specific directory within my project:

/components/navmenu/resume.pdf

/components/navmenu/navmenu.component.html

/components/navmenu/navmenu.component.css

/components/navmenu/navmenu.component.ts

In navmenu.component.html, I have added:

<a href="resume.pdf">Resume</a>

As of now, my project has not been published to a server and is only running on Localhost. How can I view the resume.pdf file in the browser?

htmlcssangularvisual-studio-2017

Answer №1

Make sure to verify the URL used in the anchor tag. You might also want to think about making a new directory within your Angular project's root folder, such as contents or a similar name, where you can store your files. Afterwards, you can simply reference it like this:

<a href="/contents/resume.pdf">View Resume</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

Sharing a PHP-filled form with a client: A step-by-step guide

Is there a way to send the same PHP filled form to the client as well? For example, the code below sends the file to the website owner in HTML/PHP forms $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b7afb6bdaa98bfb5 ...

phphtmlformsvalidation

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

javascriptcsstwitter-bootstrapvue.jsnuxt.js

Creating a dynamic background image for the ul/li div element

As a newcomer to website development, I am currently exploring how to dynamically set images in the ul/li elements within a div. Below is a snippet of the HTML code I have been working on: <div class="results"> <ul class="row"> < ...

javascriptjqueryhtmlcss

Creating a singular and distinctive string by combining two keywords

Is it possible to create a single distinct string by combining two keywords regardless of the order in which they are entered? EDIT: The keywords in question are numerical rather than alphabetical characters. The following example is merely for explanator ...

javascriptangular

Code functioning flawlessly on JSFiddle, but encountering errors on Chrome and IE

I recently implemented some JavaScript code to add a sliding animation effect to the login form that appears with an accompanying picture. After testing the code on JS Fiddle, everything worked perfectly. However, upon copying and pasting the same code in ...

javascripthtmlcssjsfiddle

Issues with reloading an Angular component

My courses page has a Join/Unjoin button, and I want the page (or just the button) to reload in Angular after clicking on Join so that I can see the Unjoin button. Currently, I have to manually refresh the page with F5 to check if the button has changed. ...

htmlangularfrontend

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

The Bootstrap modal I implemented is opening correctly, but for some reason, the form inside is not appearing

I created the AddJokeModalComponent to streamline the process of opening a form without duplicating code in every component. Below is the modal structure: <ng-template #addJokeModal> <div class="modal-content my-custom-modal"> ...

angulartypescriptbootstrap-modal

Alternatives to ::ng-deep

Currently, I am attempting to customize the appearance of an element that has been placed by the router outlet in Angular. It is essential for me to ensure that this generated element has a width of 100%. After reviewing various responses, it seems like u ...

htmlcssangular

What is causing the grid-items to appear abnormally short in my CSS layout?

Just starting out with CSS... I'm having an issue where my grid boxes are appearing too short and cutting off my code. I'm not sure why this is happening - how can I make the columns longer to fit all my divs? If possible, I would like the colu ...

csscss-grid

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss

Adjust the color of the text alongside the checkbox

How can I change the text color and content next to a checkbox? <div style="float: left;"> <input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value=1><label>Checkbox 1</label></input>< ...

javascripthtmlcheckboxinputstyles

Adjust the appearance of matSelect when the selection menu is activated

What is the best way to adjust mat-select properties when its options are open? <mat-select class="selector"> <mat-option><mat-option> </mat-select> .selector:focus { color: green; } I attempted using focus, but ...

javascriptangulartypescript

The link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

csshyperlink

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

javascripthtml

The height set to 100% is causing issues with the padding-bottom property

Currently, I have a setup that includes: A div with width set to 100% and height set to 100% An SVG element inside the div with default width and height of 100% My issue is that when applying padding to the div, the left, right, and top padding seem to w ...

css

Django mishandling template rendering and routing due to errors in urls.py configuration (specifically with the redactor app)

I have a unique Django project where users can input a fake Chuckee Cheese membership card number on the landing page. The first 8 digits are redacted and shown back to the user in a masked form. You can see my website’s landing page at http://127.0.0.1 ...

pythonhtmldjango

What is the best way to make an HTML number input display more than two decimal places?

If a user inputs 1.00, will it be automatically formatted to 1.0000? Is this feature included in the HTML 5 numeric input? ...

html

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans